一个采用 Clean Architecture 和模块化概念的样板项目

Flutter-Works Boilerplate

此存储库是一个开源项目，用于 Flutter 的样板文件，它非常支持您的工作效率，我们已经准备了许多即时功能，可以加快您的工作流程。

截图

主题	1	2	3	4	5
黑暗
浅色

入门

要求

在设置此样板文件之前，需要准备一些东西

Flutter SDK 稳定版 (最新版) 安装
Android Studio 安装
Visual Studio Code (可选) 安装
扩展 Dart 和 Flutter
- Intellij Platform 用户 (Dart, Flutter)
- Visual Studio Code 用户 (Dart, Flutter)

设置

要根据此样板文件准备您的项目，您需要执行一些步骤。有关简单的实现示例，请参阅 example 分支

以下是使用 Flutter-Works 样板文件设置项目的步骤

步骤 1

在此步骤中，您需要将此存储库中的文件下载（克隆）到您的本地计算机

git clone http://github.com/kodingworks/flutter-works-boilerplate.git

或

git clone [email protected]:kodingworks/flutter-works-boilerplate.git

步骤 2

下一步，在 bash、cmd、terminal 等命令行应用程序中打开已下载/克隆的文件夹。

然后运行此命令到控制台

flutter pub get

设置 Firebase

由于此样板文件大量使用 Firebase 技术，因此您需要在首次运行应用程序之前对其进行配置。以下是设置 Firebase 的示例/教程

Android

在 Firebase 控制台中为 Android 设置 Firebase 的第一步是首先创建您的项目。

根据各自的 flavor 和 package name 下载 google-services.json。查看更改包名

在 Firebase 控制台中启用 Google 身份验证。

创建远程配置版本示例

iOS

待办：实施 Firebase iOS 设置教程

更改包名

默认包名

生产：io.kodingworks
开发：io.kodingworks.dev
暂存：io.kodingworks.staging

要更改包名，只需搜索所有 io.kodingworks.，然后将其替换为新的包名，例如：com.mycompany.。

运行/调试

此样板文件已提供多个 flavor，允许您运行多种类型，例如用于 开发、生产 模式，还有更多。此样板文件默认提供Android 和 iOS 的样板 flavor。以下是已配置的 flavor 类型

1. 开发模式

此 flavor 仅用于在开发期间进行测试和调试。要在此 flavor 上运行，只需运行此命令

flutter run -t lib/main_dev.dart --flavor dev

2. 暂存模式

此 flavor 用于演示模式

flutter run -t lib/main_staging.dart --flavor staging

3. 生产模式

此 flavor 仅用于发布模式（供实际用户使用）

建议：此 flavor 不应用于测试或演示。

flutter run -t lib/main_staging.dart --flavor staging

如果您是 VS Code 用户

如果您使用 VS Code 作为 Flutter 应用程序开发的工具，请使用我们提供的启动配置，只需选择您想要运行的 flavor。

使用 VS Code 的优点是：与使用 CLI 相比，您可以更轻松地对每一行代码设置断点。

功能

功能	Android	iOS
多语言	✔️	✔️
暗黑模式/多主题	✔️	✔️
Google Analytics	✔️	✔️
Firebase 性能	✔️	✔️
Firebase 远程配置	✔️	✔️
Firebase 推送通知	✔️	⚠️
Firebase 身份验证	✔️	✔️
Google 登录	✔️	✔️
Apple 登录	❌	⚠️
版本检查	✔️	✔️

库/依赖

在此样板文件中，我们添加了一些库来支持工作效率。以下是此样板文件中可用的一些库的列表，包括描述和版本

名称	描述	版本
dartz	用于函数式编程。	`^0.9.2`
dio	作为处理各种 http 请求的库。	`^3.0.10`
equatable	用于处理对象比较。	`^1.2.6`
flutter_bloc	作为处理所有灵活状态管理的库。	`^6.1.2`
formz	用于处理易于使用的可重用状态管理表单验证。	`^0.3.2`
get_it	用于处理依赖注入的库。	`^5.0.6`
hive	作为主要数据库，处理各种动态数据，性能极佳。	`^1.4.4+1`
image_picker	用于从相机和图库中选择图像。	`^0.6.7+22`
rxdart	用于处理异步编程的 reactiveX	`^0.25.0`
url_launcher	用于将各种 URL/链接启动到 App 中提供的各种应用程序。	`^5.7.10`
package_info	用于获取当前原生 App 的数据，如版本、应用程序名称等。	`^0.4.3+4`
firebase_auth	用于处理 Firebase 身份验证。	`^0.20.0+1`
firebase_core	Firebase SDK for Flutter 的主库	`^0.7.0`
firebase_crashlytics	用于记录 App 中发生的各种错误代码、BUG 的库。	`^0.4.0+1`
firebase_messaging	用于处理 Firebase 控制台的通知。	`^8.0.0-dev.14`
firebase_performance	用于记录我们应用程序的性能和各种设备上的 http 请求，这些请求会发送到 Firebase Console。	`^0.5.0+1`
firebase_remote_config	用于从 Firebase 控制台获取配置数据，具有动态值。	`^0.6.0`
google_sign_in	基于 Firebase 处理 Google 登录。	`^4.5.9`

文件夹结构

flutter_modular/
┣ .vscode/
┃ ┗ launch.json
┣ android/
┣ assets/
┃ ┣ cfg/
┃ ┃ ┣ dev_env.json
┃ ┃ ┣ prod_env.json
┃ ┃ ┗ stagging_env.json
┃ ┣ fonts/
┃ ┗ https://raw.githubusercontent.com/kodingworks/flutter-works-boilerplate/main/images/
┣ features/
┃ ┣ auth/
┃ ┃ ┣ lib/
┃ ┃ ┣ test/
┃ ┃ ┗ pubspec.yaml
┃ ┣ home/
┃ ┃ ┣ lib/
┃ ┃ ┣ test/
┃ ┃ ┗ pubspec.yaml
┃ ┗ settings/
┃ ┃ ┣ lib/
┃ ┃ ┣ test/
┃ ┃ ┗ pubspec.yaml
┣ ios/
┣ launcher/
┃ ┣ ic_foreground.png
┃ ┣ ic_launcher.png
┃ ┗ logo_splash.png
┣ lib/
┃ ┣ app.dart
┃ ┣ flavors.dart
┃ ┣ main_dev.dart
┃ ┣ main_prod.dart
┃ ┣ main_staging.dart
┃ ┣ module.dart
┃ ┗ routes.dart
┣ shared/
┃ ┣ component/
┃ ┣ core/
┃ ┣ dependencies/
┃ ┣ l10n/
┃ ┗ preferences/
┣ test/
┣ analysis_options.yaml
┣ pubspec.yaml
┗ README.md

模块

由于此样板项目是模块化的，因此每个功能都需要分解成自己的模块。因此，如果您与团队一起工作，代码的开发过程将更加轻松和结构化，因为每个成员都可以专注于他们正在处理的模块。

默认模块列表

默认情况下，当您使用此样板文件时，一些模块已自动安装。以下是已提供的模块列表

共享模块

名称	描述
core	包含全局类、函数和核心的模块
component	包含全局组件的模块，这些组件不渲染特定模块
dependencies	包含多个全局依赖/库并打包在一起的模块
l10n	包含翻译数据的模块
preference	包含各种应用程序样式和与 UI（用户界面）相关的模块

功能模块

名称	描述
auth	用于处理应用程序身份验证部分的模块
home	用于主页的模块
profile	用于配置文件管理的模块
settings	用于处理应用程序中各种设置功能的模块

创建模块

当您创建一项新功能，并且该功能可以独立运行而不依赖于其他功能时，您可以创建一个单独的模块作为您的新功能模块。以下是如何设置新模块的示例

步骤 1：复制模块模板。

模块模板已在根文件夹中提供，文件夹名称为 template_module。将 template_module 文件夹复制到模块放置的目的地/位置。如果该模块是 feature，则将其放在 /features 文件夹内。

├── features/

步骤 2：重命名模块。

下一步是根据您的功能重命名模块。例如，如果模块是 payment 功能，则

之前

├─ features/
│  └─ template_module/
│    └─ lib/
│      └─ name_module.dart

之后

├─ features/
│  └─ payment
│    └─ lib/
│      └─ payment.dart

在 lib/payment.dart 文件中

之前

// TODO: change name module
library module;

export 'src/data/data.dart';
export 'src/domain/domain.dart';
export 'src/module.dart';
export 'src/presentation/presentation.dart';

之后

library payment;

export 'src/data/data.dart';
export 'src/domain/domain.dart';
export 'src/module.dart';
export 'src/presentation/presentation.dart';

在 lib/src/module.dart 文件中

之前

import 'package:core/core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';

// TODO: Change Your Name Module
class NameModule implements BaseModule {
  @override
  void inject(GetIt getIt) {
    // Data

    // Domain

    // Presentation
  }

  @override
  Map<String, Route> routes(RouteSettings settings) {
    return {
      // Routes data in module
    };
  }
}

之后

import 'package:core/core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';

class PaymentModule implements BaseModule {
  @override
  void inject(GetIt getIt) {
    // Data

    // Domain

    // Presentation
  }

  @override
  Map<String, Route> routes(RouteSettings settings) {
    return {
      // Routes data in module
    };
  }
}

在 pubspec.yaml 文件中

之前

# TODO: change name module
name: module
description: A new Flutter package project.
version: 0.0.1
author: "My Name"
homepage: "https://example.com"

environment:
  sdk: ">=2.7.0 <3.0.0"
  flutter: ">=1.17.0"

dependencies:
  flutter:
    sdk: flutter
  # TODO: UnComment & fix change path package
  # core:
  #   path: ../../shared/core
  # component:
  #   path: ../../shared/component
  # dependencies:
  #   path: ../../shared/dependencies
  # l10n:
  #   path: ../../shared/l10n
  # preferences:
  #   path: ../../shared/preferences
  

dev_dependencies:
  flutter_test:
    sdk: flutter
  effective_dart: ^1.3.0

flutter:

之后

name: payment
description: A new Flutter package project.
version: 0.0.1
author: "My Name"
homepage: "https://example.com"

environment:
  sdk: ">=2.7.0 <3.0.0"
  flutter: ">=1.17.0"

dependencies:
  flutter:
    sdk: flutter
  
  core:
    path: ../../shared/core
  component:
    path: ../../shared/component
  dependencies:
    path: ../../shared/dependencies
  l10n:
    path: ../../shared/l10n
  preferences:
    path: ../../shared/preferences

dev_dependencies:
  flutter_test:
    sdk: flutter
  effective_dart: ^1.3.0

flutter:

步骤 3：将模块注册到根项目。

注册我们创建的功能模块是强制性的，否则很可能会导致错误。注册方法如下：

首先，在根项目的 pubspec.yaml 中安装该模块。

dependencies:
  flutter:
    sdk: flutter
  
  ...

  payment: 
    path: features/payment
  
dev_dependencies:
...

根据您的模块位置进行调整。在上面的示例中，模块位于 /features 文件夹内，因此路径是 features/payment。

然后打开 lib/module.dart 文件，并添加您创建的模块类。例如：

...

List<BaseModule> appModules = [
  AuthModule(),
  HomeModule(),
  SettingsModule(),
  PaymentModule(), // New Module
];

在上面的示例中，PaymentModule 是新创建的模块。完成后，重新运行您的应用程序。

全局配置/变量

所有全局配置都以 env 的形式保存，在这种情况下，我们将其保存在 assets/cfg/ 文件夹中。

该文件夹包含一些先前可用的配置文件

dev_env.json
prod_env.json
stagging_env.json

每个项目都包含不同的配置，具体取决于 flavor 名称，例如，如果 flavor 是 dev，则名称为 dev_env.json。

我们以 json 文件扩展名的格式保存配置，因为 Flutter 本身最容易读取 json 配置。

以下是 env 配置中的示例

{
    "base_url": "https://example.co.id/v2",
    "app_name": "App",
    "encrypt": "AlOp7lBkcFRdJnXFkGcBHwM9I9TJMMas",
    "version_name": "1"
}

在上面的示例中，所有这些变量都是全局变量，也是功能启用/禁用配置变量。

注意：当配置文件发生更改时，无法执行热重载数据，并且必须重新启动调试。发生这种情况是因为每个配置都在应用程序首次启动时加载，或者在 Dart 的 main() 方法首次运行时加载。

调用全局变量

要调用全局变量，您需要使用 GlobalConfiguration 类，而 GlobalConfiguration 类是 core 模块的一部分。以下是使用示例

import 'package:core/core.dart';
import 'package:dependencies/dependencies.dart';

....

final appName = GetIt.I<GlobalConfiguration>().getValue('app_name');

print(appName);
....

翻译/本地化使用

翻译数据位于 l10n 模块中，位于 /shared/l10n。您的应用程序中的所有翻译数据都加载在此模块中。默认支持 2 种语言：印度尼西亚语和英语。

创建翻译项

要创建翻译项，您需要从 arb 代码生成到 dart。但是不用担心，此样板文件已提供翻译生成功能，您可以检查 l10n 模块中的 lib/l10n 文件夹，其文件扩展名为 .arb。例如，您可以查看此内容

{
  "hello": "Hello World"
}

因此，在 .arb 扩展名中，数据格式与 .json 格式完全相同，因此肯定更熟悉。其中每个项目都有一个 key 和一个 value。在上面的示例中，"hello" 是 key，"Hello World" 是 value。

key 是将生成的变量名
'value` 是每种语言中显示文本

注意：创建翻译时，请确保所有语言的 key 都存在于 lib/l10n 文件夹的所有语言中。

**如果您想在翻译中添加参数**

{ // intl_en.arb
  "hello": "Hello my name is {name}"
}

{ // intl_id.arb
  "hello": "Halo namaku adalah {name}"
}

其中 {} 符号表示调用时有输入参数。

注意：如果您在翻译项中添加参数/复数，请务必将其添加到所有语言本地化中。

生成翻译

每次在 l10n 模块中的 lib/l10n 文件夹中发生任何微小更改时，您都需要重新生成代码，以便代码结果是最新的。要生成，只需使用此命令

./generate_l10n.sh

获取翻译项

如果您想调用翻译项，您需要先导入 l10n 模块。并且每次调用翻译时，您都需要调用主类，即 S。例如：

import 'package:l10n/l10n.dart';

...
S.current.hello; // Hello World
...

如果有参数

import 'package:l10n/l10n.dart';

...
S.current.hello('Flutter'); // Hello My Name is Flutter
...

创建区域设置

要创建支持其他语言的翻译，您需要在 l10n 模块和 lib/l10n 文件夹中创建其他文件。格式为：

intl_{language_code}.arb

创建上述格式的文件，也可以复制其中一个本地化文件，然后重命名为语言代码。

别忘了在创建其他语言后，需要重新生成。

设置主区域设置

要设置默认语言，如果该语言尚未在某个国家/地区支持，则需要自定义配置。默认情况下，主区域设置配置设置为 English。如果要自定义，请查看 pubspec.yaml 中的 shared/l10n/pubspec.yaml。配置示例如下：

flutter_intl:
  enabled: true
  main_locale: en

在上述示例中，main_locale 的值为 en，表示 en 是语言代码，表示英语。有关更多信息，请在此处查看 ISO 639-1 代码列表以了解全球语言代码列表。

生成启动器图标

默认情况下，此样板文件已自定义启动器图标，但如果您想自定义为自己的意愿，则需要先自定义要用作启动器图标的图标。默认情况下，在 /launcher 文件夹中提供了图标大小模板。

步骤 1

配置位于根项目中的 pubspec.yaml 文件中。配置示例如下：

flutter_icons:
  android: "ic_launcher"
  ios: true
  image_path_android: "launcher/ic_launcher.png"
  adaptive_icon_background: "#E67442"
  adaptive_icon_foreground: "launcher/ic_foreground.png"
  image_path_ios: "launcher/ic_launcher.png"

有关更多信息，请参阅 pub.dev。

步骤 2

要生成图标，您需要运行此命令

flutter pub run flutter_launcher_icons:main

步骤 3

由于 flutter_launcher_icons 包仅在 main 上为 Android 生成图标启动器，尚未处理每个 flavor，因此您需要再次手动配置以在 Android 的每个 flavor 中设置图标。

复制 res 文件夹，该文件夹位于 /android/app/main/res

粘贴并替换到您目标 flavor 的文件夹。

然后重新运行您的应用程序。

生成原生启动屏

更多信息请参阅 pub.dev，生成后，像生成 icon_launcher 一样，将 res 文件夹复制回每个 flavor 文件夹。

GitHub

https://github.com/kodingworks/flutter-works-boilerplate

一个采用 Clean Architecture 和模块化概念的样板项目

Flutter-Works Boilerplate

截图

入门

要求

设置

设置 Firebase

Android

iOS

更改包名

运行/调试

1. 开发模式

2. 暂存模式

3. 生产模式

如果您是 VS Code 用户

功能

库/依赖

文件夹结构

模块

默认模块列表

共享模块

功能模块

创建模块

全局配置/变量

调用全局变量

翻译/本地化使用

创建翻译项

生成翻译

获取翻译项

创建区域设置

设置主区域设置

生成启动器图标

生成原生启动屏

GitHub

Flutter 的一个简单的动画登录 UI（带泰迪熊）

使用 Firebase Firestore 的 Flutter Instagram（具有类似功能）

Flutter-Works Boilerplate

截图

入门

要求

设置

设置 Firebase

Android

iOS

更改包名

运行/调试

1. 开发模式

2. 暂存模式

3. 生产模式

如果您是 VS Code 用户

功能

库/依赖

文件夹结构

模块

默认模块列表

共享模块

功能模块

创建模块

全局配置/变量

调用全局变量

翻译/本地化使用

创建翻译项

生成翻译

获取翻译项

创建区域设置

设置主区域设置

生成启动器图标

生成原生启动屏

GitHub

Flutter 的一个简单的动画登录 UI（带泰迪熊）

使用 Firebase Firestore 的 Flutter Instagram（具有类似功能）

您可能还会喜欢……

订阅 Flutter Awesome