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

作者:韬( ̄▽ ̄) https://juejin.im/post/5bb0c9905188255c7d214931

工作以来,我在学习新知识的时候,常常与在应试教育阶段被传授的方法作斗争——把书本的内容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. 【总】整合组件,理清逻辑。 实现每一部分的组件之后,就要回到整体的计算器逻辑,即如何完成 输入->处理->输出 ?

最后

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

https://github.com/chenyuantao/flutter_calculator

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2018-10-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

channel机理及调度理解

当当 广告

1203
来自专栏游戏杂谈

Unity 5.4版本 Application.systemLanguage 失效

上面这段代码看上面去没毛病是吧,可是市场的反馈说。为什么 iOS 和 安卓的转化率差了这么多。而且北美用户反馈怎么默认是中文啊?

1262
来自专栏程序员互动联盟

C语言和C++本质区别在哪?

疑惑一 做网站前端开发需要具备哪些基础知识? 做网站开发分为前端和后台,如果从事前端开发需要学习哪些基础知识呢?现在为大家总结一下。 html: ...

4243
来自专栏落影的专栏

GPUImage详细解析(八)视频合并混音

回顾 GPUImage源码解析、图片模糊、视频滤镜、视频水印、文字水印和动态图片水印GPUImage的大多数功能已经介绍完毕,这次的demo是源于简书的一位简友...

3435
来自专栏web前端教室

[周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? &下一个前端组件“日历”

大家好,时间飞快一晃又到了周末了,今天要跟大家一起学习的有以下这些内容: -- 什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? -- 进入下一...

2275
来自专栏web前端教室

领读《深入浅出NODEJS》—快速阅读第二章

image.png 昨天跟大家介绍了2.2 node的模块实现,这一章节的内容。今天我们继续往下看,这本书到目前为止,写的都是偏向理论的东西,也许它整本书都是这...

1866
来自专栏即时通讯技术

微信团队原创分享:iOS版微信的内存监控系统技术实践

FOOM(Foreground Out Of Memory),是指App在前台因消耗内存过多引起系统强杀。对用户而言,表现跟crash一样。Facebook早在...

1362
来自专栏游戏开发那些事

【python游戏编程之旅】第九篇---嗷大喵快跑小游戏开发实例

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

1591
来自专栏HansBug's Lab

【备忘】Idea的那些事

说到Java的IDE,似乎eclipse和Idea是目前的主流。然而,OO的课程组却一直在推荐使用eclipse,于是很多人就这样错过了Idea这样强大的IDE...

4279
来自专栏何俊林

Python爬取腾讯视频

3K5

扫码关注云+社区

领取腾讯云代金券