Flutter 新建APP 2022-07-21 周四

开始前的考虑

1. 为什么选择Flutter？

• 跨平台的方案一直都在，H5，RN，Week，小程序，Flutter等等这些都是跨平台可选择的技术。就像商品的价格由竞争对手决定。在这些可选的技术里面，不得不说，Flutter是目前最好的一个，没有之一。

• 可以说Flutter在目前的跨平台技术方案中比其他选择高出一个层次。所以，现在的决策就是：要么原生开发APP（加点H5）；要么跨平台，用Flutter开发APP。

• 在二选一的情况下，决策就方便多了。比如电商类的APP，用Flutter是可以的。而游戏类的，元宇宙类的（其实就是VR），更偏向用原生。

Flutter把iOS的体验拉低到了Android一个级别，并且在开发体验上按照Android，H5，iOS的顺序排列。按照这个特性，进行跨平台（Flutter）还是原生（特别是iOS）的选择就简单多了。

2. 是否要用GetX？

• Flutter的Stateful Widget有点繁琐

• Flutter的路由管理确实麻烦

• Flutter把UI和数据逻辑混杂在一起，确实不大好（一大坨的感觉）

• 就像iOS中的AFNetworking，GetX在Flutter的中热度上升很快

• GetX的侵入性很强，融合度很高。所以重要性比一般的第三方差价要高一个层次。用不用，在开始之前就要想好。

• 本人的选择：用GetX，就像在iOS开发中会用AFNetworking一样。

• 在2018年左右接触Flutter，对于其原理和前景是看好的，但是蛋疼的开发体验，鸡肋一样的路由跳转等等各种不爽的感觉，还是偏向原生iOS开发。

• 现在跟随团队体验了一把Flutter开发电商APP。感觉有了GetX，当然还有Dio，flutter_screenutil，cached_network_image等一大堆优秀第三方框架。目前的感觉是：不再排斥跨平台技术，用Flutter开发的体验还是可接受的。（当然最舒服的开发体验还是iOS原生，没有之一）

3. 是否要用GetX CLI？

• GetX额外提供了一套命令模式的CLI，从创建APP到打包，都有对应的脚手架命令可用

• 如果深度使用GetX，全盘接受GetX的框架规范，那么使用这套CLI是非常好的。你不需要思考，不需要做选择，按照它推荐的模板进行开发就可以了。只要一定时间的适应，应该还不错。

• 还是那句话，是否深度使用GetX，由其他竞争的第三方插件决定。比如网络部分，显然Dio做得更好。

• 就像iOS架构中的VIPER，角色分得太多，对于复杂页面还说得过去，但是对于数量更多的简单页面，就感觉不好了。命名一句话的事，为什么还要创建好几个文件，分好几个角色？

• 本人的选择： 不用GetX CLI

4. GetX如何取舍？

GetX就像一个大工具箱，包罗万象，如果不想全盘接受，那么就要懂得取舍。

• 状态管理：
  选用： GetBuilder + update() 模式
  弃用： .obs + Obx 模式

响应式路由管理，甚至是响应式编程，函数式编程，看起来很美，但是用起来并不是很习惯。

• 路由
  选用： 命名路由
  弃用： 简单路由

简单的Get.to()其实挺好的，只是Get.toNamed()相比之下并没有增加复杂度
在iOS开发中，曾经的蘑菇街route就想实现命名路由，现在有现成的，当然要用起来

• 依赖管理
  选用： 直接使用Get.put() 和Get.find()
  弃用： Binding类

一句话的事，非要多出一个类，没必要；GetxController本来就是分离出来的逻辑部分，占内存并不多，懒加载大多数情况收益不高；

• GetxController 事件监听：Workers
  这个在GetxController的onInit()周期方法中添加观察者，被观察的变量需要添加.obs后缀。
  这个在iOS开发中对应的功能是KVO，对比起来实现还是很优雅的，需要的时候可以采用。

这个功能只有响应式编程范式一种，没得选，用起来方便就好。

• View的基类
  选用： StatelessWidget
  弃用： GetView、GetWidget，StatefulWidget

• 国际化
  目前的跨境电商APP，英语为默认，中文备选，其他语言也是有可能需要的。
  只是加一个.tr后缀，使用起来已经很方便了。当然选用。切换语言集成Translations类就行了，方案很优雅。

• 主题Theme
  白天模式和夜晚模式的切换，现在的需求也比较强烈。当然选用。

• 三大对话框
  Get.snackbar();
  Get.dialog();
  Get.bottomSheet();
  这三种都抛弃了烦人context，并且样式一般都需要自定义，所以推荐使用。

• 工具类GetUtils
  这个还是很有用的；
  比如，检查邮件，电话号码，等等还是非常赞的。
  只是最好不要直接使用，而是包一层，分散到自己项目的工具类中去。

• GetConnect
  这个就是所谓的xxxProvider角色的基类，这是网络访问部分。Dio做得更好，不选用。

• GetMiddleware()
  看名字是中间件，具体的作用不清楚，不选用。

• 有用的API
  Get.arguments
  Get.previousRoute
  GetPlatform.isAndroid
  GetPlatform.isIOS
  Get.height
  Get.width
  Get.context
  Get.contextOverlay
  这些都是非常有用的工具，可以分散到各个工具类中，当然也可以根据需要直接使用。

• GetxService
  感觉跟Android中的Service组件有点像，需求的场景不多。用到的时候再研究，暂时先不考虑。

• 参考文章：

Flutter应用框架搭建(一)GetX集成及使用详解

Flutter GetX使用---简洁的魅力！

GitHub GetX

Flutter状态管理GetX使用详解

新建APP

• 方案1：flutter的命令，一行命令就搞定了。

• 方案2：Android Studio的New Flutter Project... 对话框

• 方案3：VSCode的新建命令

本人选择： 方案2，有图形化的IDE可以选择，优先考虑。
只要决定好项目名称和包名以及文件位置，其他的都根据向导选择默认的就可以了。
原生的语言选择了Swift和kotlin，这是目前的主流，原生代码也很少会涉及。

• 脚手架自动生成的文件，和直接用Flutter命令差不多

企业微信截图_59a81da3-5de8-4043-a688-e6c38a8316b6.png

• 项目视图，目前只有一个main.dart文件，是默认的计数器程序

企业微信截图_4bdf22ad-dfa0-4d7f-8496-97fbbcc381ad.png

• 接下来，用真机或者模拟器跑一下，看到默认的模拟器程序可用就可以了。iOS的，可能需要打开Runner.workspace之类的，解决一下证书之类的问题，就当做是普通的iOS项目处理就可以了。

接入GetX

• GetX也是一个普通的第三方插件，所以上pub.dev按照说明接入就可以了。

• 由于GetX地位特殊，所以第一个引入。

• GetX的侵入性比较强，需要修改main.dart。将默认的MaterialApp修改为GetMaterialApp

• 默认生成的main.dart中main()方法以及MyApp都足够简单，可以不修改。

• MyHomePage就是默认的技术器StatefulWidget，这个放在main中是不合适的，可以新建一个文件my_home_page.dart，将MyHomePage相关内容移出来，让main.dart保持简单。

• 修改后的样子：只要默认的计数器程序仍然能跑起来，说明GetX已经成功引入，并且能够使用了。

分离计数器页面，导入GetX

• 装IDE插件。GetX热度很高，IDE的相关辅助插件很多。根据使用习惯，选择一款适合自己的，这样能带来方便。

• 本人选择： 结合前面的GetX的功能取舍，网名“小呆呆666”写的一款插件比较适合，目前在用。AndroidStudio是可以的，但是VSCode没有。不过这个插件主要是用来生成文件夹和文件，其他的VSCode中其他的插件也是可以用的。

• 参考文章

get: ^4.6.5

xdd666t/getx_template

GetX代码生成IDEA插件，超详细功能讲解（透过现象看本质）

文件夹规划

• 脚手架工程lib文件夹下只有main.dart一个文件，文件夹如何规划，每个人都有自己的想法，只要自己满意就好，没有必要强求。参考文章中就有例子工程，都有可取之处。

• lib下的文件夹命名规范遵循Linux的小写加下划线的模式，这个最好遵守一下。

• routes : 路由，命名路由需要，并且把所有页面都集中一个地方定义，也是好的。

• modules：模块，里面是一些页面，需要用到插件来生成模板

• utils: 工具类，这里封装一些工具，想缓存，图片之类的

• components：组件，一些公用的组件。

• services：网络接口Api。几乎每个页面都离不开网络，特别重要，单独列出来。

• themes：主题，白天和暗夜模式的切换，换肤等等

• langs：多语言

• configs：一些常数定义，信息配置等等

• models：模型定义。这个可以跟页面，也可以单独列在这里。网络和页面都要用到。

文件夹规划

以上这些是主动规划的文件夹。在实际使用中并不会这么理想。有些插件会自动生成一些文件夹或者文件，直接就在lib目录之下。
还有一些无法归类的文件，那么就有可能在增加几个顶级文件夹。这些都可以到时候再调整。

• 参考文章

xieyezi/flutter-getx-template

KevinZhang19870314/flutter_getx_boilerplate