Flutter最佳入门方式——写一个计算器

9,587

工作以来,我在学习新知识的时候,常常与在应试教育阶段被传授的方法作斗争——把书本的内容100%复制到脑中才算学会吗?不会被使用或者不常用的知识,花费大量功夫去记忆才算完美吗?

Flutter的入门文档给予了我很大的启发,它并没有把API文档或者是整个框架的内容直接展现给初学者,而是通过一个简单的计数器例子,从基础的组件到手势的监听,再到状态的改变,将Flutter最核心的思想展现的淋漓尽致。

我见过许多初学者,喜欢先将入门文档、API文档和教学视频一字不漏地全部看完,却从来没有打开编辑器,哪怕写上一句Hello World。

我认为的高效学习的方法是,学习掌握恰到好处可以开始的基础知识,通过操作来深入学习,边玩边学,在这个过程中发现自己不懂的部分,通过查阅资料,掌握不懂的知识,最后将所学知识从大脑中提取出来,以别人能够理解的方式教授给别人。

为什么是计算器?

  • 布局经典,能学会使用最重要几个的Widget用法,迅速掌握常用的布局,如Container、ListView、Row、Column、Expanded、FractionallySizedBox等等。
  • 样式简单,能学会使用最常用的几个布局属性,如padding、color、style、decoration(圆角、描边)、alignment等等。
  • 有输入,能学会手势的捕获以及组件间的数据流动
  • 有处理,能学会Dart的基本数据类型的用法,如String、List、int、double、num、bool等。
  • 有输出,能学会何时使用StatelessWidgetStatefulWidget
  • 不依赖UI,不依赖接口,成功运行Hello World就可以立即开发,不要一开始就追求完美,因为它会阻止你行动,要知道「开始做」远比「做好」重要。

如何开发?

1. 【总】观察布局,全局出发。

从全局出发,可以发现是一个Column(垂直)布局,子组件们按照一定的权重分配内部空间。显而易见,顶部Text的权重为2(flex:2),其余子组件ListView和Row的权重均为1(flex:1)。

2. 【分】拆分组件,逐个击破。

拆分组件,可以按照业务逻辑拆分,也可以按照布局是否相同来拆分,在这里笔者选择的是按照布局是否相同来进行拆分,原因是业务逻辑并不复杂,布局可以复用的地方更多。如图所示,以NumberButton组件及NumberButtonGroup组件为例:

3. 【总】整合组件,理清逻辑。

实现每一部分的组件之后,就要回到整体的计算器逻辑,即如何完成 输入->处理->输出

最后

实际上,这是我第一个完整完成的Flutter App,尽管我开发过数十个Android App和微信小程序,但是我很久没有在完成一个项目之后如此兴奋了,我找回了学生时代为了求知而努力学习的感觉。在提炼了自己的学习方法,并付诸行动,得到的收获让人难以置信。

项目地址