Flutter：组织工程代码

进入 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: {
          "/": (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
编译：码王爷