进入 Flutter 开发时我遇到的最大问题就是如何管理我的代码。原生 Android 开发通过 XML 文件和 Java（或 Kotlin）文件分割 UI 代码和逻辑代码，但如果你不小心的话，Flutter 代码会变得很混乱。在使用 Flutter 一年多之后，我将自己的经验编写成一个简单的指南，来帮助你以最佳方式搭建应用程序，以期达到可读性和未来可重构的可能性。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:exampleapp/blocprovs/example-bloc-prov.dart';
import 'package:exampleapp/blocs/example-bloc.dart';
import 'package:exampleapp/theme/style.dart';
import 'package:exampleapp/screens/example1/examplescreen1.dart';
import 'package:exampleapp/screens/example2/examplescreen2.dart';
void main() {
runApp(ExampleApp());
}
class ExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ExampleProvider(
bloc: ExampleBloc(),
child: MaterialApp(
title: 'ExampleApp',
theme: appTheme(),
initialRoute: '/',
routes: <String, WidgetBuilder>{
"/": (BuildContext context) => ExScreen1(),
"/ExScreen2": (BuildContext context) => ExScreen2(),
},
),
);
}
}
关于 main.dart
任何 Flutter App 的基础入口（main.dart 文件），都只应该包含很少的代码，且只作为应用程序的概述。
由 runApp 运行的 Widget 应该是 StatelessWidget，而且它本身应该不比包装在 BLoC(Business Logic Component) Provider 中的 MaterialApp 更复杂。
MaterialApp 本身不应该有繁重的代码，而是从其它文件中获取 Theme 和 Widget 。
子目录
- theme 只包含一个描述 App 主题的 style.dart，可以在 main.dart 中访问它；
- services 文件夹包含一些 Web API 与原生交互的代码；
- components 文件夹有多个不同尺寸屏幕下使用的自定义 widget；
- models 文件夹中的每个文件都有一个在 App 中广泛使用的自定义模型类；
- bloc 和 blocprovs 文件夹都很简单，每个里面分别包含一个 BLoC 和 BLoC Provider；
- screen 文件夹包括许多不同的子文件夹，每个文件夹对应不同尺寸的屏幕，它包含两个东西：一个用于组织每个组件的主 screen 文件，和一个将每个组件保存为单独文件的 “components” 文件夹。屏幕上任何一块比几个 widget 更复杂的的部件都应该是它自己的组件。
扩展阅读
在经历了许多不太理想的代码组织后，我设计了这个组织形式，它将用于我之后所有的应用程序，同时也建议你这么做。这里有一个比较详细的示例可以参考。
原文： https://medium.com/flutter-community/flutter-code-organization-de3a4c219149
作者：Conner Aldrich
编译：码王爷
