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

Posted 2021-04-29 刘望舒

工作以来，我在学习新知识的时候，常常与在应试教育阶段被传授的方法作斗争——把书本的内容100%复制到脑中才算学会吗？不会被使用或者不常用的知识，花费大量功夫去记忆才算完美吗？
Flutter的入门文档：https://flutter.io/widgets-intro/ 给予了我很大的启发，它并没有把API文档或者是整个框架的内容直接展现给初学者，而是通过一个简单的计数器例子，从基础的组件到手势的监听，再到状态的改变，将Flutter最核心的思想展现的淋漓尽致。
我见过许多初学者，喜欢先将入门文档、API文档和教学视频一字不漏地全部看完，却从来没有打开编辑器，哪怕写上一句Hello World。
我认为的高效学习的方法是，学习掌握恰到好处可以开始的基础知识，通过操作来深入学习，边玩边学，在这个过程中发现自己不懂的部分，通过查阅资料，掌握不懂的知识，最后将所学知识从大脑中提取出来，以别人能够理解的方式教授给别人。

为什么是计算器？

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

如何开发？

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

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

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

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

3. 【总】整合组件，理清逻辑。
实现每一部分的组件之后，就要回到整体的计算器逻辑，即如何完成 输入->处理->输出 ？

最后

https://github.com/chenyuantao/flutter_calculator