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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容