写给前端工程师的 Flutter 详细教程

本文作者：hicc，腾讯 CSIG 前端开发工程师

最爱折腾的就是前端工程师了，从 jQuery 折腾到 AngularJs，再折腾到 Vue、React。最爱跨屏的也是前端工程师，从 phonegap，折腾到 React Native，这不又折腾到了 Flutter。

图啥？

低成本地为用户带来更优秀的用户体验。

目前来说Flutter可能是其中最优秀的一种方案了。

Flutter 是什么？

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter是由原 Google Chrome 团队成员，利用 Chrome 2D 渲染引擎，然后精简 CSS 布局演变而来。

Flutter 架构

或者更详细的版本

• Flutter 在各个原生的平台中，使用自己的 C++的引擎渲染界面，没有使用 webview，也不像 RN、NativeScript 一样使用系统的组件。简单来说平台只是给 Flutter 提供一个画布。

• 界面使用 Dart 语言开发，貌似唯一支持 JIT，和 AOT 模式的强类型语言。

• 写法非常的现代，声明式，组件化，Composition > inheritance，响应式……就是现在前端流行的这一套 ????

• 一套代码搞定所有平台。

Flutter 为什么快？Flutter 相比 RN 的优势在哪里？

从架构中实际上已经能看出 Flutter 为什么快，至少相比之前的当红炸子鸡 React Native 快的原因了。

• Skia 引擎，Chrome， Chrome OS，Android，Firefox，Firefox OS 都以此作为渲染引擎。

• Dart 语言可以 AOT 编译成 ARM Code，让布局以及业务代码运行的最快，而且 Dart 的 GC 针对 Flutter 频繁销毁创建 Widget 做了专门的优化。

• CSS 的的子集 Flex like 的布局方式，保留强大表现能力的同时，也保留了性能。

• Flutter 业务书写的 Widget 在渲染之前 diff 转化成 Render Object，对，就像 React 中的 Virtual DOM，以此来确保开发体验和性能。

而相比 React Native：

• RN 使用 JavaScript 来运行业务代码，然后 JS Bridge 的方式调用平台相关组件，性能比有损失，甚至平台不同 js 引擎都不一样。

• RN 使用平台组件，行为一致性会有打折，或者说，开发者需要处理更多平台相关的问题。

而具体两者的性能测试，可以看这里，结论是 Flutter，在 CPU，FPS，内存稳定上均优于 ReactNative。

Dart 语言

在开始 Flutter 之前，我们需要先了解下 Dart 语言……

Dart 是由 Google 开发，最初是想作为 JavaScript 替代语言，但是失败沉寂之后，作为 Flutter 独有开发语言又焕发了第二春 ????。

实际上即使到了 2.0，Dart 语法和 JavaScriptFlutter非常的相像。单线程，Event Loop……

Dart Event Loop模型

当然作为一篇写给前端工程师的教程，我在这里只想写写 JavaScript 中暂时没有的，Dart 中更为省心，也更“甜”的东西。

• 不会飘的this

• 强类型，当然前端现在有了 TypeScript ????

• 强大方便的操作符号：

• ?. 方便安全的foo?.bar取值，如果 foo 为null，那么取值为null

• ?? condition ? expr1 : expr2 可以简写为expr1 ?? expr2

• =和其他符号的组合: *=、~/=、&=、|= ……

• 级联操作符(Cascade notation ..)

// 想想这样省了多少变量声明
querySelect('#button')
 ..text ="Confirm"
 ..classes.add('important')
 ..onClick.listen((e) => window.alert('Confirmed'))

甚至可以重写操作符

class Vector {
  final int x, y;

  Vector(this.x, this.y);

  Vector operator +(Vector v) => Vector(x + v.x, y + v.y);
  Vector operator -(Vector v) => Vector(x - v.x, y - v.y);

  // Operator == and hashCode not shown. For details, see note below.
  // ···
}

void main() {
  final v = Vector(2, 3);
  final w = Vector(2, 2);

  assert(v + w == Vector(4, 5));
  assert(v - w == Vector(0, 1));
}

注：重写==，也需要重写 Object hashCodegetter

class Person {
  final String firstName, lastNa