Flutter 起步

GetX极大地简化和优化了Flutter的使用方式!

你应该了解一下GetX和Firebase。

使用的包

  • Firebase (firebase_core, firebase_auth, cloud_firestore)
  • GetX
  • get_storage
  • crypto
  • http
  • csv (用于转换谷歌Excel翻译的csv文件)

外部资源

常用命令

  • flutter run 将在设备上运行应用(如果您有多个设备,它会询问您选择哪个设备)。
  • flutter devices 将显示您的设备列表。
  • flutter run -d {device} 将在选定的设备上运行。
  • flutter build {web | ios | android} 将为选定的平台构建应用。
  • flutter run --release 将允许您测试一个优化后的构建(类似发布版本)。

翻译

您可以运行一个命令行应用来生成GetX本地化类,该类从一个谷歌表格拉取数据

  • 进入 /helpers/update_localizations.dart
  • 使用 dart update_localizations.dart 运行

Firebase

目前它链接到我自己的一个测试表(方便您快速测试此仓库#imSoNice),但请确保您设置好Firebase并与您的项目关联,以便继续开发。

在您设置好自己的Firebase后,需要替换以下内容:

  • iOS文件 (/ios/Runner/GoogleService-Info.plist)
  • Android文件 (/android/app/google-services.json)
  • Web凭证。 (在 /web/index.html 中)

此项目的Firestore规则非常简单。以下是已创建的规则。

  • 第一条规则匹配admin集合中的任何用户,并仅允许您读取该文档。不允许任何人写入此集合。我通过Firebase控制台手动添加我的管理员用户。

  • 第二条规则允许用户读取和写入,前提是用户与当前登录的用户匹配。因此,用户只能更改自己的信息。以下是我的Firestore集合的设置方式。

主题

尽可能使用主题。

待办:这里还有更多内容需要添加

项目概览

main.dart — 包含维护应用状态(主题、语言和用户)的信息。它初始化语言和主题设置。设置路由。

/constants/

提示:尽量多使用和编辑app_themes常量。

app_themes.dart — 包含与我们的浅色和深色主题相关的信息。

globals.dart — 包含一些全局应用设置。

app_routes.dart — 包含应用路由。

/controllers/

提示:控制器包含大量逻辑,可以将其视为一种可重用的方式!

auth_controller.dart — 我们的用户和身份验证函数,用于创建、登录和退出我们的用户以及保存我们的用户数据。

language_controller.dart — 保存和加载我们选择的语言。

theme_controller.dart — 保存和加载我们选择的主题。

/helpers/

提示:谷歌Excel的方式真是太好了。使用那个update_localizations脚本!

validator.dart — 包含一些用于表单字段的验证函数。

update_localizations.dart — 从谷歌表格生成localization.g.dart文件的命令行Dart应用。

localizations.g.dart — 这个文件是从我们的谷歌表格生成的(请勿手动编辑此文件)。

/models/

user_model.dart — 包含保存在Firestore中的用户模型。

menu_option_model.dart — 包含我们在设置中的语言选项和主题选项的模型。

/screens/

技巧

  • 屏幕应使用组件,并设置最大宽度、边距和它们之间的间距。
  • 屏幕文件名应与URL和类名相似,或者完全相同,类名应为NameScreen

home.dart — 包含显示用户信息的主屏幕UI。

settings.dart — 包含用于设置主题、语言和一些用户设置的设置屏幕。

splash.dart — 包含初始加载屏幕,目前只有一个圆形进度指示器。

/screens/auth/

提示:如果很多屏幕共享通用目的,请将它们分组到一个文件夹中。

reset-password.dart — 向用户发送密码重置电子邮件。

sign-in.dart — 允许用户使用电子邮件和密码登录。

sign-up.dart — 允许用户创建新账户。

update-profile.dart — 允许用户更改其电子邮件或姓名。

/components/

提示:组件通常不应有最大宽度、边距/内边距!
我的意思是,除了那些具有此类目的的组件(如Section)之外。

section.dart — 为某个部分添加内边距(左/右)和最大宽度。想象一下(Layout -> Section -> Content/Components)

avatar.dart — 在主页上显示用户头像。

dropdown_picker.dart — 显示一个下拉列表。

dropdown_picker_with_icon.dart — 显示一个带图标的下拉列表。

form_input_field.dart — 处理我们的表单字段元素。

form_input_field_with_icon.dart — 处理我们的表单字段元素,但还有一个图标。

vertical_spacing.dart — UI中的简单间距。

label_button.dart — UI中的一种按钮。

loading.dart — 圆形加载指示器覆盖层。

logo_graphic_header.dart — 显示在我们UI中的图形。

primary_button.dart — UI中的另一个按钮。

segmented_selector.dart — 用于选择主题的控件。

GitHub

查看 Github