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

工做以来，我在学习新知识的时候，经常与在应试教育阶段被传授的方法做斗争——把书本的内容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等。
• 有输出，能学会什么时候使用StatelessWidget和StatefulWidget。
• 不依赖UI，不依赖接口，成功运行Hello World就能够当即开发，不要一开始就追求完美，由于它会阻止你行动，要知道「开始作」远比「作好」重要。

如何开发？

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

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

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

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

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

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

最后

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

项目地址