Flutter 清洁项目

一个使用 Injection、路由和简单身份验证的 Flutter 示例应用程序，遵循干净的代码和最佳实践

功能

  • 已清理的 Flutter 项目
  • 使用规则设置为错误的 Linter
  • 已配置路由生成器
  • 通过路由传递参数/变量
  • SimpleAuthService & 配置了路由守卫
  • 结构良好的 Flutter 项目包含 Screens（屏幕）、Components（组件）、Services（服务）等...

使用的包

入门

项目根文件夹

项目根文件夹是 src。为了利用 VS Code 设置，请将 src 作为您的工作文件夹打开。

构建

自动生成的文件已提交到此存储库。如果您更改了任何使用自动生成器的代码部分，将会出现编译错误。这可以通过运行自动生成命令来解决，以再次创建编译应用程序所需的源文件。
通过运行自动生成命令来解决，以再次创建编译应用程序所需的源文件
以编译应用程序。

检出分支后，只需运行

flutter pub run build_runner build --delete-conflicting-outputs

您还可以使用 watch 命令来持续生成更改中的文件

flutter pub run build_runner watch --delete-conflicting-outputs

依赖注入

依赖注入是通过使用
Injectable 包完成的。

在运行 build_runner 命令后，会生成一个名为
setup.config.dart 的文件，其中包含所有注入。

路由

路由是通过使用
AutoRoute 包完成的。

在 /Services 目录下有一个名为 router 的服务，它使用 AutoRoute 包来生成应用程序中的路由和路径。

在运行 build_runner 命令后，会生成一个名为
将生成 router.gr.dart，其中包含所有路由和用于路由的类。

另外，为了演示如何通过路径将参数传递给屏幕，请参阅 /home/message/message_screen_v.dart

状态管理

此项目选择的状态管理是 Cubit。

Cubit 是著名实现的子集 BLoC 模式： bloclibrary.dev，它放弃了 Events（事件）的概念，并简化了状态发射方式。

每个组件/屏幕都有 3 个部分来管理状态。

  • name_m.dart

    • Model：此文件包含状态管理的模型定义。为了减少重复代码，如 copyWith、isA[Class] 等，我使用了 Freezed 包来为每个状态模型自动生成所需的类和构造函数。

  • name_v.dart

    • View：此文件包含我们组件/屏幕的视图，它继承自 BaseView 类。BaseView 类本身继承自 StatelessWidget，并有一个 getter 用于在视图中获取 viewModel。它使用 locateService<T>() 和 Injectable DI。

  • name_vm.dart

    • ViewModel：此文件包含我们组件/屏幕的 viewModel，它继承自 BaseViewModel 类（T 是状态 Model 类）。BaseViewModel<T> 类本身继承自 cubit<T>。

屏幕

我在此项目中定义了 3 个屏幕。

  • 首页
    • 应用程序的根路径。
      • 有一个链接到 message 屏幕，并传递了一个参数。
      • 使用 AuthService 登出用户。
      • 在其中显示 counter 组件。
  • message
    • 一个演示如何获取我们路由系统中的参数的屏幕。
      • 输入参数在视图的构造函数中定义 [String message]。
      • 在路由服务中，我还必须为该屏幕定义输入参数。
  • login
    • 登录屏幕，有一个简单的按钮，并使用 AuthService 在应用程序中执行伪登录。
      • 有一个可选参数 redirectPath，路由在成功登录后使用它将用户导航回他们之前的位置。
      • 为了保护选定的路由并将用户导航到此屏幕，我在路由服务类中定义了 AuthenticatedUser 类。

每个文件夹中都有一个名为 folder_name.dart 的文件，其中包含该文件夹内文件的导出。我使用此模式来最小化对应用程序和其他类别的导入。在用法中，我们只需要导入 components.dart 或 screens.dart 即可使用每个文件夹的实现。

组件

目前此项目中只有一个组件，用于演示如何在屏幕中使用组件。

  • 计数器
    • 一个使用 cubit 状态管理的简单计数器组件。
    • 我将此组件用在 Home 屏幕中。

图片

login

home

message

联系我

如果您有任何问题或建议，请联系我

GitHub

查看 Github