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和微信小程序,但是我很久没有在完成一个项目之后如此兴奋了,我找回了学生时代为了求知而努力学习的感觉。在提炼了自己的学习方法,并付诸行动,得到的收获让人难以置信。
项目地址
Flutter最佳入门方式——写一个计算器相关推荐
- 用C语言写一个计算器
用C语言写一个计算器,除了四则混合运算之外,还支持三角函数和绝对值等函数. PS E:\Code\PL\calc> .\a.exe abs(3*5-4^2) abs(3*5-4^2)=1.000 ...
- python 写一个计算器_Python | 写个计算器吧
今天咱们用python来写一个计算器,计算一组数的最大公约数和最小公倍数吧. 注:本文使用python3 01 死循环 下面给出一段看似正确的代码,这段代码的作用是给出n1,n2的最小公倍数. 你可以 ...
- 写一个计算器(C语言版本),可以求出:整数的加,减,乘,除四则运算
写一个计算器(C语言版本),可以求出:整数的加,减,乘,除四则运算! 对于求出整数的加减乘除问题,我想大家现如今看见笔者此篇博文时候!大多都已经能够正确写出准确的代码来求整数的加减乘除了!其实对于计算 ...
- 网页中用PHP设计一个计算器,用PHP写一个计算器(附完整代码)_后端开发
PHP作用域和文件夹操作示例_后端开发 php中的作用域有:变量作用域.静态变量.匿名函数use,函数内部不能访问函数外部的变量,但在匿名函数中,可以通过use将外部变量引入匿名函数中. 本篇文章介绍 ...
- vue手写一个计算器
计算器大家都不陌生 有计算器机器 有手机计算器 网页计算器! 那么好 今天我来给大家手写一个计算器 啥都不说上操作 请听题:vue手写计算器 一个个小方块拼成一个计算器 绿色比较好 可以缓解视力哦 i ...
- 写一个计算器,要求实现加减乘除功能,并且能够接受新数据,通过用户交互实现
写一个计算器,要求实现加减乘除功能,并且能够接受新数据,通过用户交互实现 要求: 1.写四个方法:加减乘除 2.利用循环+switch进行用户交互 3.传递需要操作的两个数 4.输出结果 packag ...
- 【c语言写计算器】利用函数写一个计算器 包括菜单功能和加减乘除四个功能
/*利用函数写一个计算器 包括菜单功能和加减乘除四个功能 作者:NBDR_YL*/ #include<stdio.h>int mean(void); //声明菜单的函数 float add ...
- 用Python写一个计算器
学习目标:学会利用python的GUI做界面布局 手写计算器代码熟悉控件的使用方法 优化计算器代码,解决获取按钮文本的方法 了解lambda函数的传参优点和局限 打包生成自己的计算器软件,并独立运行 ...
- input点击事件不能用_用js简单写一个计算器
嗨,大家好,今天给大家带来的是一个计算器 首先要知道我们常用的计算器都有哪些按键,有'0~9','+' ,' -' , '*', '/',还有'=' 和'.',基本是这些按键,然后我们去创建一些按键. ...
- java小游戏大鱼吃小鱼入门(15min写一个小游戏)
[mie haha的博客]转载请注明出处(万分感谢!): https://blog.csdn.net/qq_40315080/article/details/82823954 写代码前分析下游戏的各个 ...
最新文章
- scrapy接selenium关键步骤
- Nodejs Hello world benchmark
- jquery-easyui环境的搭建及测试
- IT规划的企业应用实践(8)研究的目的和意义 之 解决两大矛盾
- spring总结(01)
- python *args **kargs
- 【CCCC】L2-021 点赞狂魔 (25分),,模拟水题,map数组,间接排序
- 学习日记——FPGA入门基础
- MIT 18.01 单变量微积分总结
- fan4801开关电源原理图_六款简单的开关电源电路设计,内附原理图详解
- excel取末尾数字_excel取后面几位数
- Open vStorage —— 虚拟化的存储路由系统
- 【记忆中的CASIO】
- Springboot中自定义文件映射
- java判断字符串是字母或者数字组合
- 烂大街的TCP/IP网络模型,你真的懂了?
- 深圳湾口岸没有直达香港机场
- 微信服务商如何申请?
- UEFI 基础教程 (十六) - ACPI 简单使用
- 太极链——太极链的四大核心技术
热门文章
- React 详解,组件,条件渲染
- 微服务架构实战篇(三):Spring boot2.0 + Mybatis + PageHelper实现增删改查和分页查询功能
- Javascript基础知识笔记二
- Git 本地分支关联远程分支
- Cause: the class org.apache.tools.ant.taskdefs.optional.junit.JUnitTask was not found
- 2021桂花开得真晚,晚了将近一个月
- 全网首发:怎样制作CDKEY(2)-数据构造
- error C2864 只有静态常量整型数据成员才可以在类中初始化
- 编程基本功:要建立测试基准
- TeaVM的samples/benchmark范例运行办法