笔记
https://github.com/delay/flutter_starter
// 安装重命名函数
dart pub global activate rename
// 重命名
dart pub global run rename –bundleId com.bodesoft.sb_app_movil
dart pub global run rename –appname “sb_app_movil”
GetX Flutter Firebase 认证示例。
更新:2.0.0版本已更改为新的语言选项并添加了空安全。
GetX是Flutter的一个相对较新的包,它提供了使Flutter开发更简单的缺失环节。我最近转换了一个我创建的firebase认证项目,该项目使用provider进行状态管理。切换到GetX简化了我之前在Flutter开发中遇到过的许多痛点。我不再需要将context传递到函数中了。我也可以更好地将我的逻辑与UI分离。GetX还大大简化了路由、显示snackbar和dialog。
我在制作这个项目时使用了许多非常好的项目和教程。请查看这些链接以获取更多关于GetX的帮助。GetX文档,待办事项GetX示例,Amateur Coder GetX视频和加载覆盖层。
那么,为什么您要使用GetX呢?让我举一个例子说明它如何简化我的代码。当我使用Provider时,有更多的样板代码。使用起来感觉更晦涩难懂。GetX使我的代码更容易理解。这是我的main.dart原始代码与GetX代码的对比。
一旦您理解了GetX的方式,就可以更容易地组织您的代码,并将UI和函数之间的关注点分开。例如,在UI中调用函数时,我必须处理来自函数的结果,并用结果显示snackbar。使用GetX,我能够将snackbar移到实际的函数中,这更有意义,因为我不再需要将成功和失败消息在函数之间传递。下面我将展示一个通过旧方法与GetX方法登录用户的按钮。我更喜欢GetX的方法,即使它没有短很多,但我喜欢将逻辑与UI完全分离。
GetX还有一个名为get_storage的存储包。它可以取代shared preferences。它简化了在设备上存储数据的方式。这是另一个前后代码的例子。
GetX还有许多其他功能可以使事情变得更简单,例如处理主题、获取各种设备设置等。这个包简化了开发人员在构建应用程序时每天面临的许多问题。
在构建一个认证项目时,您需要许多功能才能成为一个生产级别的Flutter项目。我想要浅色和深色模式主题,并且能够自动检测和切换主题。我需要一种可以轻松切换语言并自动检测用户语言的功能。我想要一种简单的方法来处理从英语(不幸的是我唯一知道的语言)翻译。这是通过运行一个命令行应用程序来生成GetX本地化类来实现的,该类从Google表格中提取信息,并轻松翻译成其他语言。此外,我还需要一种方法来实现简单的用户角色,并且它必须是安全的。我看到许多认证包在firestore的用户集合中包含角色,而这通常由该用户自己编辑。这将使用户可以轻易地将自己提升为管理员。我还想展示如何为firestore设置一些基本规则来保护它。最后,我希望有一种方法可以让用户更改他们的个人资料,并更改他们的电子邮件或密码。
要处理语言翻译,您需要为您的应用程序在Google表格中创建一个翻译。然后打开 /helpers/update_localizations.dart 并将docID和sheetId替换为您自己的documentId和sheetId。完成此操作后,您需要转到命令行,进入helpers目录。然后键入:dart update_localizations.dart。这将创建或覆盖localization.g.dart文件,其中包含您的自定义翻译。您不应该直接编辑此文件。每次更改翻译时,都需要重新运行此生成器。
您可以复制我的表格作为您的应用程序的起点。使用Google表格的好处是,您可以通过简单的Google公式来让Google翻译一个字段:=GOOGLETRANSLATE(B4,en,fr) 这表示将字段B4中的短语从英语翻译成法语。
为了处理用户角色,我创建了一个单独的admin集合,并添加了一个与我的用户UID具有相同文档ID的文档。这样做的原因是确保安全性,正如这篇Medium文章中所解释的那样。我采用了该文章中解释的第二种方法。如果我们只是将角色作为users集合中的一个字段,那么任何用户都可以将自己升级为管理员用户。因此,通过将管理员角色移到一个单独的集合中,我们可以创建一些Firestore规则,允许用户更新关于他们自己的字段,而无需授予他们更改其被分配角色的权限。您也可以通过为其他角色添加额外的集合来生成其他用户角色。
我为这个项目设置的规则相当简单。这是我创建的规则。
第一条规则匹配admin集合中的任何用户,并只允许您读取该文档。任何人都可以写入此集合。我手动通过Firebase控制台添加我的管理员用户。第二条规则允许用户仅在用户与当前登录用户匹配时才读取和写入。因此,用户只能更改关于他们自己的信息。以下是我的Firestore集合的设置方式。
最后,我想稍微解释一下我的UI。我试图通过主题来尽可能多地控制。您可以通过更改主题来改变用户界面的外观。我仍在学习关于仅通过主题可以改变的所有内容。我还将小的UI组件分解到单独的组件文件夹中。然后,我创建一个自定义小部件,而不是直接使用标准小部件。这使得我可以在一个地方进行更改,如果我决定对表单字段进行UI更改,例如在我的form_input_field.dart中,而不是更改散布在十几个文件中的多个TextFormField小部件。
项目概述
main.dart — 包含维护应用程序主题、语言和用户状态的信息。它初始化语言和主题设置。设置路由。
/constants/
app_themes.dart — 包含与我们的浅色和深色主题相关的信息。
globals.dart — 包含一些全局应用程序设置。
app_routes.dart — 包含应用程序路由。
/controllers/
auth_controller.dart — 我们的用户和认证函数,用于创建、登录和退出用户以及保存我们的用户数据。
language_controller.dart — 保存和加载我们选择的语言。
theme_controller.dart — 保存和加载我们选择的主题。
/helpers/
validator.dart — 包含我们表单字段的一些验证函数。
update_localizations.dart — 生成localization.g.dart文件的命令行Dart应用程序。
localizations.g.dart — 此文件由我们的Google表格生成(请勿手动编辑此文件)。
/models/
user_model.dart — 包含我们在Firestore中保存的用户模型。
menu_option_model.dart — 包含我们的语言选项和设置中主题选项的模型。
/ui/
home_ui.dart — 包含显示用户信息的Home UI。
settings_ui.dart — 包含用于设置主题和语言以及一些用户设置的设置屏幕。
splash_ui.dart — 包含初始加载屏幕,目前只是一个圆形进度指示器。
/ui/auth/
reset_password_ui.dart — 向用户发送密码重置电子邮件。
sign_in_ui.dart — 允许用户使用电子邮件和密码登录。
sign_up_ui.dart — 允许用户创建新帐户。
update_profile_ui.dart — 允许用户更改其电子邮件或名称。
/ui/components/
avatar.dart — 在home_ui上显示用户头像。
dropdown_picker.dart — 显示下拉列表。
dropdown_picker_with_icon.dart — 显示带图标的下拉列表。
form_input_field.dart — 处理我们的表单字段元素。
form_input_field_with_icon.dart — 处理我们的表单字段元素,但也有一个图标。
form_vertical_spacing.dart — UI中的一个简单间隔。
label_button.dart — UI中的一种按钮。
loading.dart — 圆形加载指示器覆盖层。
logo_graphic_header.dart — 在我们的UI中显示的图形。
primary_button.dart — UI中的另一个按钮。
segmented_selector.dart — 用于选择主题的控件。
Provider也是一个很棒的包,也是我在找到GetX之前用于Flutter开发的东西。Flutter仍然是新的,并且在快速发展。看到它在Flutter社区的帮助下如此迅速地进步是很有趣的!
无论如何,希望这个项目能帮助到一些人。随时随意使用其中的任何部分,我并不是所有代码都是我创建的,其中一些部分是来自观看教程和审查上面提到的项目。请务必为您的项目设置firebase。



