【flutter】4.提高dart代码可读性，优化目录结构，flutter组件化开发

在flutter示例中，所有的代码全部存在main.dart文件中是可行的，哪怕你把所有的代码全部写在main.dart中也是可以的，flutter并没有对此加以限制，但如此以来，可读性想当的糟糕，甚至让人难以直视，当项目足够大时，维护起来想当的复杂，怎么解决这一问题呢？

1.首先介绍 import 本地dart文件

先打开main.dart观察原始代码

在这个代码中所有的实现全部放在了main.dart文件中，而main.dart作为一个flutter程序的入口，将所有相关实现全部放在此处，显然不够优雅

此时新建一个home.dart文件，将home页面的代码单独提出来，显然比将所有代码都写在main.dart文件中显的更加优雅

回到main.dart文件中，修改main.dart文件内容

使用 import 将 home.dart 文件内容导入，这样便达到了分离解耦的效果，我们回到 home.dart 文件，改写home.dart文件内容，将build中混乱不堪的代码通过新建方法，提升代码的可读性，方法名很重要，好的方法名自带注释

对比原始的home.dart，发现是不是感官大好

 

在普通的android项目中，我们都知道组件化的开发模式，按业务或者功能进行模块化拆分，提高代码的可读性，在flutter中我们该如何操作？

2.组件化拆分

参考前端开发中的方法，在lib目录下新建pages，utils等目录，将home.dart移动到pages目录下，以后所有的界面都存在pages目录下，简单页面可以直接 <页面名称>.dart 命名，复杂页面可以分成多个dart文件，每个dart文件都相当于是一个页面组件，将这些dart文件放在以<页面名称>命名的文件夹下，这样一来，这个项目结构清晰明朗