跳到主要内容

Flutter for Restro

· 阅读需 4 分钟
Quany
Quany
软件工程师

介绍​

Restro

figma 设计

git@gitlab.suixingpay.com:wang_sb/flutter_resto_demo.git

https://restosuite.sg.larksuite.com/wiki/M5z1wnh9AiN7OLkXFZklBglEged

https://www.figma.com/design/nyVmeDET90AY92wTh7Xbx0/%E9%A2%84%E8%AE%A2-APP?node-id=407-45570&m=dev

Flutter​

国内镜像：

export PUB_HOSTED_URL="https://pub.flutter-io.cn"
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

flutter 基础框架

特性​

  • 状态管理：GetX
  • 路由管理：GetX
  • 路由拦截：middlewares
  • 路由 Controller 绑定：GetPage -> binding
  • 全局 Controller 绑定: app.dart -> initialBinding
  • 网络请求封装：commons/ajax.dart -> dio
  • 主题切换：GetX
  • 枚举：封装 enums
  • 区分环境配置： config
  • 本地存储、区分 local 和 session 级别：commons/storage.dart
  • iconfont 图标：脚本基于 iconfont.json 生成
  • 国际化：GetX
  • 全局错误捕获上报服务器
  • MVVM 模式：models/pages/controllers+services
  • 日志管理：commons/logger.dart
  • 启动屏：纯 Flutter 组件方式实现，如果是 android 或 ios 可以考虑使用 flutter_native_splash + Flutter组件方式，避免白屏 + 处理业务逻辑
  • 屏幕适配（缩放）：flutter_screenutil
  • 代码生成 build_runner + 自定义脚本
  • 代码规范：git_hooks
  • app 版本检测，下载新的版本
  • 如何做热更新或者类似热更新
  • 依赖注入：injectable
  • 权限管理：permission_handler 处理相机、存储、GPS等权限 app_settings 让用户跳转到系统设置页

代码生成​

通过代码生成，简化开发流程，提高开发效率。

基础代码生成​

  • models 生成： 基于 json_serializable 做*.g.dart相关文件生成
  • iconfont：基于builder/iconfont_builder.dart 生成 gen/icon_font.gen.dart
  • assets: 基于flutter_gen 做资源文件生成 gen/assets.gen.dart

注意：项目拉取下来之后，首先通过如下命令生成代码。

# 清除缓存
dart run build_runner clean

# 生成代码 强制覆盖已存在的生成文件
dart run build_runner build --delete-conflicting-outputs

生成页面​

基于bin/create_page.dart 生成 pages/controllers/services 修改路由文件routes/app_routes.dart

参数说明：​

  1. --name=xxx 指定名称
  2. -y 强制覆盖已存在文件

最终会生成：​

  1. 创建：pages/test_user/test_user_page.dart;
  2. 创建：controllers/test_user_controller.dart;
  3. 创建：services/test_user_service.dart;
  4. 修改：routes/app_routes.dart
# 例如生成一个test_user页面

dart bin/create_page.dart --name=test_user -y

打开模拟器​

flutter emulators
flutter emulators --launch <模拟器名称>

区分环境配置​

项目中，区分环境配置主要是通过RUN_ENV变量来实现的，在lib/config/config.dart中根据RUN_ENV变量来配置不同的环境。

# 开发环境
flutter run --dart-define=RUN_ENV=dev

# 生产环境
flutter run --dart-define=RUN_ENV=production

# 测试环境
flutter run --dart-define=RUN_ENV=test

# 打包Android
flutter build apk --release --shrink --dart-define=RUN_ENV=production

# 打包iOS
flutter build ios --dart-define=RUN_ENV=production

代码规范​

项目中，代码规范主要是通过analysis_options.yaml文件来实现的。

git_hooks结合，提交时检测：

# 安装 git_hooks
dart bin/git_hooks_init.dart

# 卸载 报错忽略，库有问题，其实已经卸载了
dart bin/git_hooks_un_install.dart

测试​

Flutter 约定测试文件放在/test目录中，测试文件以_test.dart结尾，例如test/widget_test.dart。

运行测试：

flutter test

参考文档​

微信公众号​

微信公众号