Flutter 学习笔记

作为一个多年经验的 Web 后台开发程序员，我还有少数一些前端的经验（有 Bootstrap，jQuery 之类框架的使用经验），最近因为公司的项目，想要着手一款客户端软件的开发，这些年其实一直很想开发一款自己的手机 App，不过一直都执行力不足，之前尝试的是 iOS，始终没有成效，这回大家都一口推荐 Flutter，所以，我再做一次尝试。

安装

Flutter 的安装，真是一个不错的体验，登录英文官网，照着指引，一步步做，就真的可以安装成功。首先是下载对应操作系统的版本，然后配置好 PATH 路径，使得 flutter 指令可以直接在命令行执行。然后，执行 flutter doctor 指令，就可以检查操作系统的依赖是否完备，这个设计太贴心了。按照指引，再去安装 Android Studio 之类的就可以。

这里想分享的一点就是，这里大家尽量完全按照官网的指引去做比较好，虽然 flutter doctor 给出了指引，但是还是不如官网说得详尽。我安装了两次，第一安装按照官网指引很顺利，第二次，我就照着记忆和 flutter doctor 的指引去做了，结果，竟然卡住了。主要是有个步骤需要从 Android Studio 的配置项里激活安装步骤的，就是 Android Studio 的命令行工具的安装，但是 flutter doctor 的提示一直是没有签署协议，如果看官网，就不会漏过这一步。所以，这里的主要感受就是，一定要认真看官网。

Hello, World!

学习每种技术，第一个项目，无疑都是“你好，世界！”，感觉 Flutter 作为一个移动端的开发框架来说，真的做得无以伦比。只要在命令行执行：

1

flutter create my_app

然后，进入目录后，执行

1

flutter run

就可以轻松地跑起来了。如果没有事先启动模拟器，就会在 Chrome 浏览器里，启动一个 Web 版的实例，启动 iPhone 模拟器后，就会自动链接 iPhone 模拟器，启动一个 App 版本。简直太棒了。对于我这种首次开始客户端开发的小白来说，编译、模拟之类的工作正是最大的难点。但是这些都省略了，可以直接进入到框架学习和代码编写阶段，简直完美无缺。这个环节，我给打 100 分，完美。

Dart

学习 Dart 完全就是因为 Flutter，不过，除了 Flutter，还有 AngularDart 也是使用 Dart 语言。这门语言可能也有不少其他领域的应用，不过应该成气候的不多，至少我没怎么听说过。实际使用下来，语法不用多言，对于一个熟练的程序员来说，没有太大的难点，语法糖很多，各种现代化的特性都已经支持，泛型、异步、函数式等等，都不在话下，整体来说，编写 Dart 还是非常愉快的。

Dart 语言是 Google 创造的，有比较强大的支持资源，因为 Flutter 不可抵挡的趋势，背后社区也非常可观。据说，在 Google 内部还是比较受欢迎的。

const 和 final 修饰符

在 Dart 里，const 和 final 是两个很常见的修饰符。我以前用过的语言里，final 比较少见，const 比较常见。

const 很容易理解，代表的意思是一个常量。既可以修饰变量（也就是等号左边的），也可以修饰值（等号右边的）。

1
2
3

const a = const [];
const a = [];       // 与第 1 行效果完全一样
var a = const [];   // 与第 1，2 行意思不一样，a 可以重新赋值

const 在 Dart 里，还可以用来修饰类（Class） 的构造函数。而且，这个用法也是非常常见，在创建一个 Widget 的时候，尤其是 StatelessWidget 的时候，官方推荐的 Snippet 就使用 const 来修饰构造函数。其含义是，该类的成员不可更改（immutable）。

1
2
3

class SearchButton extends StatelessWidget {
  const SearchButton({Key? key}) : super(key: key);
}

Dart 的 IDE 环境（Android Studio、Visual Studio Code）里，都有很强的提示功能。当你使用 const 修饰一个构造函数的时候，你会注意到这个关键词的内涵。首先所有的成员必须都是 final 的，其次，所有成员必须是在构造时候就赋值。你很容易感觉到，这些保留字的作用并非是正交互斥（MECE）的，很多时候，其含义是重叠的，时不时就让人迷糊。如果你写一阵子就会明白我说的，写得更久一点，你又会适应，觉得自然了。

final 保留字，用来修饰一个变量，声明这个变量不可修改（immutable），似乎官方也推荐尽可能把变量声明为 final，似乎这样可以优化性能或者内存之类的。同样是 immutable，那么与 const 到底什么区别呢，有时候免不了要迷惑。区别就在于，const 是在编译阶段就确定了是常量的，而 final 可以在运行时才确定其值。

1
2

final today = DateTime.now();
// const today = DateTime.now(); // 这行无法编译通过

声明为 final 的变量，必须在行内赋值。如果不想在行内赋值也可以，必须要使用 late 保留字来修饰，就可以在需要的时候再赋值，当然，只能赋值一次。而且，要注意的是，使用 late 修饰的声明为 final 的变量，你是没有任何办法判定其是否已经进行了赋值的。如果你要使用这个 late final 的变量，就必须 100% 确定其已经赋值了，否则程序就会崩溃。如果你不能做到这一点，很简单，你就不该使用 late final 。

强类型

Dart 是一门强类型语言，所有的变量，一经指定类型就不能更改，只能存储这个类型的值。声明变量的时候，可以使用类型进行声明，也可以简单得只用 var 声明，因为编译器可以进行类型推导，不一定总是需要强制指定类型。不过有类型推导，不指定类型，不代表就是动态类型。

Dart 提供了一个特殊的类型叫 dynamic，可以适配各种不同的类型，估计也是为了提供一定的灵活性，不过呢，我还没有深刻体会到这个类型的用法。

有了强类型后，就要提到这个语言的泛型。这是强类型的语言必备的功能。Dart 里的泛型使用非常普遍，很多类都支持泛型，最常见的就是基本数据结构 List 和 Map，都是泛型的。

函数

Dart 里的函数是一等公民，所以，也可以支持函数式编程泛型，感觉已经是现代编程语言的标配了。我所不熟悉的就是 Dart 里的函数参数定义，有所不同，支持位置参数，也支持命名参数两种定义方式。并且，还支持位置可选参数和命名可选参数。不过在定义可选参数的时候，只可以使用其中一种。举个例子：

1
2
3
4
5
6
7
8

void helloWorld( String name, [int times] ) {
    print("Hello" + name);
}

// 也可以
void helloWorld( { @required String name, int times } ) {
    print("Hello" + name);
}

上面的代码例子里，展示了位置参数，可选位置参数，可选命名参数，这些参数的设定也支持缺省值。并且函数也可以省去类型声明，因为支持类型推断，这个和变量的类型推断是一致的。

箭头函数

可能这是 Dart 代码里，另外一个极其常用的语法了，虽然没什么特殊的，不少语言里也有类似的功能，比如 Python 的 lambda 表达式，PHP 里也有匿名函数之类的结构。不过，箭头函数的使用真的极其普遍。所以，如果不熟悉的话，可是要好好了解了。

异步

同样，这门语言里也提供了异步的支持，有原生元语 async/await，可以轻松定义异步调用，也支持生成器语法 yield 关键字。这些很多现代语言都支持了，就不赘述了。

Flutter

其实，Dart 的学习和 Flutter 的学习是穿插的，除了刚开始学编程的新手，工作过几年的人，都会掌握一门类 C 语言，所以在这个基础上，看 Dart 也只能是极其眼熟。如果对现代编程语言有所涉猎，就更容易了，很多高级特性都是共通的。

所以，真正的学习步骤，其实一上来就接触 Flutter 了。虽然各种文字教程，视频教程，都很执拗地上来就要教 Dart，就好像我的学习笔记，我觉得只能是这样归类资料比较有条理而已，真正的学习绝对不是线性的。我甚至建议直接就开始学习 Flutter 好了，等遇到了看不懂的语法特性再去看 Dart 的参考。这样不会过早地消弭耐心，更好保持学习的节奏。

绘制页面

上手 Flutter，第一个学习的，肯定是绘制一个基础的页面，比如在一个 App 的第一屏上，放一个按钮，或者放一个 Label，展示个 “Hello，world!” 什么的。

官方提供了一个例子，还挺用心的，功能是通过一个加号按钮，点击就改变页面上的一个 Label 的值，使得里面的数字 +1。这个例子展示了 Flutter 框架里很重要的几个概念，Widget，StatelessWidget 和 StatefulWidget 等。

在 Flutter 的世界里，所有的界面都是 Widget，有些甚至不是界面，比如 Center，这种位置控制，也是用 Widget 实现的。按照我现在的理解，就是把关于布局和表现层的一些描述性的指令，全部封装到了 Widget 这个体系里面。然后，程序员可以用这些指令来结构化地描述自己的 App 的界面。

配合 Flutter 提供的一些特定的语法糖，让整个 Flutter 的代码，看起来更像是一种 Markup Language（其实不是）。

布局规则

其实 Flutter 的布局并没有看上去这么随意的，还是有一些约束的，而且和我原来有的感觉不太一样的。网上很容易搜索到 Flutter 的一些教程，不过更多是关于如何排版好一个 App 的界面，你看了一些，然后照着操作，会发现，很容易上手，但是当我真的独立去实现一个 App 的界面的时候，就会发现，轻松就能掉坑里。

官方文档也说布局的一些核心理念，我这时候才能有了一点点了解。“**Constraints go down. Sizes go up. Parent sets position.**” 当你的界面上出现了黄黑相间的斑马线的时候，你才能体会到这个原则对你带来的影响。

我遇到过些很难解决的问题，比如，我在 Column 里，嵌套了一个 Column，这个时候，内层的 Column 我想让它撑满高度也好，撑满宽度也好，都很难做到。原因其实我现在也没太看懂，不过看上面的三句话原则，就是 Sizes go up，大概是内层的元素没有指定一个有限的宽度和高度，所以，外层就会要求内层元素尽可能展示得小，网上会搜到很多的解决方法，比如设置一个 MainAxisSize.min，我试过，并不那么好用的，而且，网上搜到很多描写怎么解决让内层 Column 撑满高度的，没搜到什么撑满宽度的指导。最后，我给内层 Column 的元素，外面套了个 Container ，然后指定其宽度为 double.infinity ，反倒把我自己的问题解决了。

页面导航

页面导航跳转，可以用原生的 Navigator，也可以用各种现成的框架，不过我始终没明白，框架的必要性是什么，无法理解引入框架后，带来的真正好处，网上搜到很多介绍路由的框架比如 fluro，都是提及简单的用法，没有提及设计的原因和原理是什么。感觉比较优质的技术文章还是很稀缺的，指望能很深入地讲解问题的资料，还是很少见。你只能搜到如何做什么什么，至于为什么，就很难搞清楚。这点，即使对一个多年经验的程序员来说，也不是很友好。

我之前做了个例子，结果一直报一个错误 No Material Widget Found. 这个错误。完全让人一头雾水，错误消息说，Widget 没有被包裹在 Material Widget 里面。网上搜到的都说，外面套个 Scaffold 就好了，可是我看来看去，我的 Widget 明明就已经在 Scaffold 里面了啊。然后反复折腾很久，我才意识到，是我要跳转的目标页面，那个页面跟节点，没有套入一个 Material Widget，这才解决了问题。

状态管理

使用 Flutter 的命令，创建第一个模板 App 的时候，就会接触到状态管理这个问题，只是作为新手，那个时候，体验真的不深。当我尝试做一个简单的 App，画完界面的时候，就开始发现，这是一个不得不搞清楚的话题了。

我所熟悉的 Web 后台开发，是面向 HTTP 协议的，所以早就习惯了“无状态”，用户的每个请求都会携带所有的参数，系统处理用户的每个请求，都是无状态的。比如 Web 后台开发的过程中，很多 API 的实现，有一个基本的要求就是“幂等”，足见这种业务模型的特点了。

而客户端的开发就有极大的不同，用户直接就置身在状态的海洋中，极目所至，看到的全是状态，每个细节都充分可视化到用户的面前，如果有什么变化了，就要立刻可视化到用户的面前，相反，没变的东西，在界面上就不该变，不能吸引用户的注意。简直从不关心状态到状态变化极度敏感的另一个极端。

Flutter 的状态管理有多种方法。框架自带的命令行工具，创建的模板 App 里，展示了一个计数器的例子，就展示了最基础的一种状态管理方案，就是 State，也是最基础的状态管理方案。不过，这显然不是完美的方案，可能仅仅是最简单的一种方案。因为比较容易看明白吧。

此外，很快就会接触到的有 Provider，至少我看了几个例子，都是大量使用了 Provider 的。Bloc，Redux，等等也是常常能看到的关键词。框架底层似乎有一些关键词是 InheritedWidget，Stream 等等。反正，我来到这个领域，马上被各种概念的海洋给包围了。罕有适合我这样的程度阅读的资料。只能硬着头皮，一个碎片一个碎片在脑海里拼接了。

网络请求

根据我的了解，网络请求，最常见的就是使用一个叫 Dio 的类库，不过虽然是个封装好的包，仍然是不能直接使用的，（这点蛮奇怪的），很多的包引入后，都要习惯性地再封装一次 Util 类才能正常使用。就我的观察来看，是这样。

之前发现了一个包叫 flustars，里面封装了各类的 Utils 类，也包含了 DioUtil。不过我还是从一个我看了很多次的范例 App 的代码里直接拷贝了一个 net 目录过来，里面有很多封装好的代码，我简单做了个适配。主要解决了一些问题，比如统一的报错处理，还有一个类似拦截器的东西，Interceptor，可以在请求前灌入一些自定义的 Header，用来处理身份鉴权之类的 header 比较有效，还有就是强类型的语言，在返回值的处理上，也要费不少功夫。

怎么处理返回的 json 值，不像在 PHP 或者 Python 里面那么简单，还是要一层层的处理，先解析成 Map，然后再继续构造对象，这个过程也需要不少衔接的代码。

本地存储

这也是必然会遇到的一块内容，一个客户端 App，一旦登录后，第一个要解决的就是保存用户的登录态，当然，如果你有很多设置的选项，也免不了要保存。在 Android 里面有个叫 Shared Preference 的东西，就是专门用来存储这些的，在 iOS 里面应该叫做 UserDefaults，名字不一样，但是性质应该是一样的，都是 key-value 类型的本地存储。所以，在 Flutter 里面有了一个统一的封装。

不过就像很多的功能一样，直接拿来使用的话，也会显得很原始，上面也有各类的包封装，在 flustars 里面也有个类，叫 sp_util，已经抽离成了单独的包，可以引入进来使用，当然，引进来后，你可能还要继续封装（苦笑脸）。

使用主题

主题也是一个我百思不得其解的东西，感觉当我按照设计图进行设计的时候，各种尺寸，各种颜色都会出现，而主题控制则极为局限。而且主题的应用的时候，也比较难用。另外可能也是没看文档，或者说我英语不好，看到主题里提到的那些名字，根本无法了然，设定的每个颜色会应用在哪些地方。比如 PrimaryColor 和 AccentColor 到底会在 button 上怎么表现？在 TextField 上怎么表现？…… 还有那么多那么多的控件上怎么表现呢？难道一个一个看代码？

实在是困扰啊，提供了一个好的机制，但是没有好的指导来判断怎么使用，真是苦恼。