Flutter圈子FlutterFlutter中文社区

Flutter:组织工程代码

2019-05-15  本文已影响15人  全站工程师

进入 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 。

子目录

扩展阅读

在经历了许多不太理想的代码组织后,我设计了这个组织形式,它将用于我之后所有的应用程序,同时也建议你这么做。这里有一个比较详细的示例可以参考。


原文: https://medium.com/flutter-community/flutter-code-organization-de3a4c219149
作者:Conner Aldrich
编译:码王爷

上一篇 下一篇

猜你喜欢

热点阅读