对于 Flutter 快速开发框架的思考

要打造一个Flutter的快速开发框架，首先要思考的事情是一个快速开发框架需要照顾到哪些功能点，经过2天的思考，我大致整理了一下需要的能力：

• 
  
• 状态管理：很明显全局状态管理是不可或缺的，这个在前端领域上，几乎是一种不容置疑的方案沉淀，他就像人体的血液循环系统，连接了每个区域角落。
  
• 网络请求管理：这个是标配了，对外的窗口，一般来讲做选型上需要注意可以支持请求拦截，支持响应拦截，以及错误处理机制，方便做重试等等。
  
• 路由管理：可以说很多项目路由混乱不堪，导致难以维护，和这个功能脱不了干系，一般来讲，需要支持到页面参数传递，路由守卫的能力。
  
• UI组件库：在Flutter上，可能不太需要考虑这个，因为Flutter本身自己就是已这个为利刃的行家了，不过现在有些企业发布了自己的UI库，觉得可以跟一下。
  
• 数据持久化：对于用户的一些设置，个性化配置，通常需要存在本地。而且，有时候，我们在做性能优化的时候，需要缓存网络请求到本地，以便，可以实现秒开页面，因此这依然也是一个不可获取的基础模块。
  
• 依赖注入：很多情况下，为了便于管理和使用应用中的服务和数据模型，我们需要这个高级能力，但是属于偏高级点的能力了，所以是一个optional的，你可以不考虑。
  
• 国际化：支持多语言开发，现在App一般都还是挺注重这块的，而且最好是立项的时候就考虑进来，为后续的出海做准备，因为这个越到后面，处理起来工作量越大。
  
• 测试框架：支持单元测试、组件测试和集成测试，保证业务质量，自动化发现问题。
  
• 调试工具：帮助开发者快速定位和解决问题，排查性能问题。
  
• CI/CD集成:支持持续集成和持续部署的解决方案，简化应用的构建、测试和发布过程。
  

那么，基于上面的分析，我就开始做了一些选型，这里基本上就是按照官方Flutter Favorites ,里面推荐的来选了。因为这些建议的库都是目前Flutter社区中比较流行和受欢迎的，能够提供稳定和高效的开发体验。

1. 状态管理：Riverpod

• 
  
• 库名: flutter_riverpod
  
• 描述: 一个提供编译时安全、测试友好和易于组合的状态管理库。
  
• 选择理由: Riverpod 是 Provider 的升级版，提供更好的性能和灵活性，但是说哪个更好，其实不能一概而论，毕竟不同的人会有不同的编码习惯，当然这里可以设计得灵活一些，具体全局状态管理可以替换，即便你想使用 GetX，或者是 flutter_bloc 也是 OK 的。
  

  @riverpod
  Future boredSuggestion(BoredSuggestionRef ref) async {
  final response = await http.get(
  Uri.https('boredapi.com/api/activit…'),
  );
  final json = jsonDecode(response.body);
  return json['activity']! as String;
  }

  
  

  class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
  final boredSuggestion = ref.watch(boredSuggestionProvider);
  // Perform a switch-case on the result to handle loading/error states
  return boredSuggestion.when(
  loading: () => Text('loading'),
  error: (error, stackTrace) => Text('error: $error'),
  data: (data) => Text(data),
  );
  }
  }

  
  

2. 网络请求管理：Dio

• 
  
• 库名: dio
  
• 描述: 一个强大的Dart HTTP客户端，支持拦截器、全局配置、FormData、请求取消等。
  
• 选择理由: Dio 支持Restful API、拦截器和全局配置，易于扩展和维护。这个已经是老牌的网络请求库了，稳定的很，且支持流式传输，访问大模型也丝毫不马虎。
  

  final rs = await dio.get(
  url,
  options: Options(responseType: ResponseType.stream), // Set the response type to stream.
  );
  print(rs.data.stream); // Response stream.

  
  

3. 路由管理：routemaster

• 
  
• 库名: routemaster
  
• 描述: 提供声明式路由解决方案，支持参数传递、路由守卫等。
  
• 选择理由: url的方式访问，简化了路由管理的复杂度。
  

  '/protected-route': (route) =>
  canUserAccessPage()
  ? MaterialPage(child: ProtectedPage())
  : Redirect('/no-access'),

  
  

4. UI组件库：tdesign_flutter

• 
  
• 库名: tdesign_flutter
  
• 描述: 腾讯TDesign Flutter技术栈组件库，适合在移动端项目中使用。。
  
• 选择理由: 样式比原生的稍微好看且统一一些，大厂维护，减少一些在构建UI方面的复杂性。
  

5. 数据持久化：Hive

• 
  
• 库名: hive
  
• 描述: 轻量级且高性能的键值对数据库。
  
• 选择理由: Hive 提供了高性能的读写操作，无需使用SQL即可存储对象。
  

  var box = Hive.box('myBox');

  
  

  box.put('name', 'David');

  
  

  var name = box.get('name');

  
  

  print('Name: $name');

  
  

6. 依赖注入：GetIt

• 
  
• 库名: get_it
  
• 描述: 一个简单的服务注入，用于依赖注入。
  
• 选择理由: GetIt 提供了灵活的依赖注入方式，易于使用且性能高效。
  

  final getIt = GetIt.instance;

  
  

  void setup() {
  getIt.registerSingleton(AppModel());

  
  

  // Alternatively you could write it if you don't like global variables
  GetIt.I.registerSingleton(AppModel());
  }

  
  

  MaterialButton(
  child: Text("Update"),
  onPressed: getIt().update // given that your AppModel has a method update
  ),

  
  

7. 国际化和本地化：flutter_localization

• 
  
• 库名: flutter_localization
  
• 描述: Flutter官方提供的国际化和本地化支持。
  
• 选择理由: 官方支持，集成简单，覆盖多种语言。
  

8. 测试和调试：flutter_test, mockito

• 
  
• 库名: flutter_test (内置), mockito
  
• 描述: flutter_test提供了丰富的测试功能，mockito用于模拟依赖。
  
• 选择理由: flutter_test是Flutter的官方测试库，mockito可以有效地模拟类和测试行为。
  

9. 日志系统：logger

• 
  
• 库名: logger
  
• 描述: 提供简单而美观的日志输出。
  
• 选择理由: logger支持不同级别的日志，并且输出格式清晰、美观。
  

10. CI/CD集成

CI/CD集成通常涉及外部服务，如GitHub Actions、Codemagic等，而非Flutter库。

目录规划

前面已经做完了选型，下来我们可以确立一下我们快速开发框架的目录结构，我们给框架取名为fdflutter，顾名思义，就是fast development flutter，如下：

fdflutter/

├── lib/

│   ├── core/

│   │   ├── api/

│   │   │   └── api_service.dart

│   │   ├── di/

│   │   │   └── injection_container.dart

│   │   ├── localization/

│   │   │   └── localization_service.dart

│   │   ├── routing/

│   │   │   └── router.dart

│   │   └── utils/

│   │       └── logger.dart

│   ├── data/

│   │   ├── datasources/

│   │   │   ├── local_datasource.dart

│   │   │   └── remote_datasource.dart

│   │   └── repositories/

│   │       └── example_repository.dart

│   ├── domain/

│   │   ├── entities/

│   │   │   └── example_entity.dart

│   │   └── usecases/

│   │       └── get_example_data.dart

│   ├── presentation/

│   │   ├── pages/

│   │   │   └── example_page.dart

│   │   └── providers/

│   │       └── example_provider.dart

│   └── main.dart

├── test/

│   ├── data/

│   ├── domain/

│   └── presentation/

├── pubspec.yaml

└── README.md

在这个结构中，我保持了核心功能、数据层、领域层和表示层的划分：

• 
  
• core/api/: 使用Dio来实现ApiService，处理所有网络请求。
  
• core/di/: 使用GetIt来实现依赖注入，注册和获取依赖。
  
• core/localization/: 使用flutter_localization来实现本地化服务。
  
• core/routing/: 使用routemaster来实现路由管理。
  
• core/utils/: 使用logger来实现日志记录。
  
• data/: 数据层包含数据源和仓库，用于获取和管理数据。
  
• domain/: 领域层包含实体和用例，用于实现业务逻辑。
  
• presentation/: 表示层包含页面和Provider，用于显示UI和管理状态。
  
• test/: 测试目录包含各层的测试代码，使用flutter_test和mockito来编写测试。
  

我想，感兴趣的朋友们，可以私信我交流，我后续会在 GitHub 上放出该flutter 快速开发框架的 template 地址。

探索代码的无限可能，与老码小张一起开启技术之旅。点关注，未来已来，每一步深入都不孤单。