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 — 用于选择主题的控件。