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

• 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语法](()和JavaScript[Flutter](()非常的相像。单线程，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, lastName;

Person(this.firstName, this.lastName);

// Override hashCode using strategy from Effective Java,

// Chapter 11.

@override

int get hashCode {

int result = 17;

result = 37 * result + firstName.hashCode;

result = 37 * result + lastName.hashCode;

return result;

}

// You should generally implement operator == if you

// override hashCode.

@override

bool operator ==(dynamic other) {

if (other is! Person) return false;

Person person = other;

return (person.firstName == firstName &&

person.lastName == lastName);

}

}

void main() {

var p1 = Person(‘Bob’, ‘Smith’);

var p2 = Person(‘Bob’, ‘Smith’);