最愛折騰的就是前端工程師了，從 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 在各個原生的平臺中，使用自己的 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……

當然作為一篇寫給前端工程師的教程，我在這里只想寫寫 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'); 
  var p3 = 'not a person'; 
  assert(p1.hashCode == p2.hashCode); 
  assert(p1 == p2); 
  assert(p1 != p3); 
} 

這點在 diff 對象的時候尤其有用。

lsolate

Dart 運行在獨立隔離的 iSolate 中就類似 JavaScript 一樣，單線程事件驅動，但是 Dart 也開放了創建其他 isolate，充分利用 CPU 的多和能力。

loadData() async { 
   // 通過spawn新建一個isolate，并綁定靜態方法 
   ReceivePort receivePort =ReceivePort(); 
   await Isolate.spawn(dataLoader, receivePort.sendPort); 
   // 獲取新isolate的監聽port 
   SendPort sendPort = await receivePort.first; 
   // 調用sendReceive自定義方法 
   List dataList = await sendReceive(sendPort, 'https://hicc.me/posts'); 
   print('dataList $dataList'); 
} 
 
// isolate的綁定方法 
static dataLoader(SendPort sendPort) async{ 
   // 創建監聽port，并將sendPort傳給外界用來調用 
   ReceivePort receivePort =ReceivePort(); 
   sendPort.send(receivePort.sendPort); 
 
   // 監聽外界調用 
   await for (var msg in receivePort) { 
     String requestURL =msg[0]; 
     SendPort callbackPort =msg[1]; 
 
     Client client = Client(); 
     Response response = await client.get(requestURL); 
     List dataList = json.decode(response.body); 
     // 回調返回值給調用者 
     callbackPort.send(dataList); 
  }     
} 
 
// 創建自己的監聽port，并且向新isolate發送消息 
Future sendReceive(SendPort sendPort, String url) { 
   ReceivePort receivePort =ReceivePort(); 
   sendPort.send([url, receivePort.sendPort]); 
   // 接收到返回值，返回給調用者 
   return receivePort.first; 
} 

當然 Flutter 中封裝了compute，可以方便的使用，譬如在其它 isolate 中解析大的 json。

Dart UI as Code

在這里單獨提出來的意義在于，從 React 開始，到 Flutter，到最近的 Apple SwiftUI，Android Jetpack Compose 聲明式組件寫法越發流行，Web 前端使用 JSX 來讓開發者更方便的書寫，而 Flutter，SwiftUI 則直接從優化語言本身著手。

函數類的命名參數

void test({@required int age,String name}) { 
  print(name); 
  print(age); 
} 
// 解決函數調用時候，參數不明確的問題 
test(name:"hicc",age: 30) 
// 這樣對于組件的使用尤為方便 
class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
  return Scaffold( 
      appBar: AppBar(), 
      body: Container(), 
      floatingActionButton:FloatingActionButton() 
    ); 
  } 
} 

大殺器：Collection If 和 Collection For

// collection If 
Widget build(BuildContext context) { 
  return Row( 
    children: [ 
      IconButton(icon: Icon(Icons.menu)), 
      Expanded(child: title), 
      if (!isAndroid) 
        IconButton(icon: Icon(Icons.search)), 
    ], 
  ); 
} 
// Collect For 
var command = [ 
  engineDartPath, 
  frontendServer, 
  for (var root in fileSystemRoots) "--filesystem-root=$root", 
  for (var entryPoint in entryPoints) 
    if (fileExists("lib/$entryPoint.json")) "lib/$entryPoint", 
  mainPath 
]; 

更多 Dart 2.3 對此的優化看這里。

Flutter 怎么寫

到這里終于到正題了，如果熟悉 web 前端，熟悉 React 的話，你會對下面要講的異常的熟悉。

Flutter App 的一切從lib/main.dart文件的 main 函數開始：

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 
 
class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'Welcome to Flutter', 
      home: Scaffold( 
        appBar: AppBar( 
          title: Text('Welcome to Flutter'), 
        ), 
        body: Center( 
          child: Text('Hello World'), 
        ), 
      ), 
    ); 
  } 
} 

Dart 類 build 方法返回的便是 Widget，在 Flutter 中一切都是 Widget，包括但不限于

• 結構性元素，menu，button 等
• 樣式類元素，font，color 等
• 布局類元素，padding，margin 等
• 導航
• 手勢

Widget 是 Dart 中特殊的類，通過實例化(Dart 中new 是可選的)相互嵌套，你的這個 App 就是形如下圖的一顆組件樹(Dart 入口函數的概念，main.dart -> main())。

Widget 布局

上說過 Flutter 布局思路來自 CSS，而 Flutter 中一切皆 Widget，因此整體布局也很簡單：

• 容器組件 Container
• decoration 裝飾屬性，設置背景色，背景圖，邊框，圓角，陰影和漸變等
• margin
• padding
• alignment
• width
• height
• Padding，Center
• Row,Column,Flex
• Wrap, Flow 流式布局
• Stack， Z 軸布局
• ……

Flutter 中 Widget 可以分為三類，形如 React 中“展示組件”、“容器組件”，“context”。

StatelessWidget

這個就是 Flutter 中的“展示組件”，自身不保存狀態，外部參數變化就銷毀重新創建。Flutter 建議盡量使用無狀態的組件。

StatefulWidget

狀態組件就是類似于 React 中的“容器組件”了，Flutter 中狀態組件寫法會稍微不一樣。

class Counter extends StatefulWidget {  
  // This class is the configuration for the state. It holds the  
  // values (in this case nothing) provided by the parent and used by the build  
  // method of the State. Fields in a Widget subclass are always marked "final".  
  @override  
  _CounterState createState() => _CounterState();  
}  
  
class _CounterState extends State<Counter> {  
  int _counter = 0;  
  
  void _increment() {  
    setState(() {  
      // This call to setState tells the Flutter framework that  
      // something has changed in this State, which causes it to rerun  
      // the build method below so that the display can reflect the  
      // updated values. If you change _counter without calling  
      // setState(), then the build method won't be called again,  
      // and so nothing would appear to happen.  
      _counter++;  
    });  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    // This method is rerun every time setState is called, for instance  
    // as done by the _increment method above.  
    // The Flutter framework has been optimized to make rerunning  
    // build methods fast, so that you can just rebuild anything that  
    // needs updating rather than having to individually change  
    // instances of widgets.  
    return Row(  
      children: <Widget>[  
        RaisedButton(  
          onPressed: _increment,  
          child: Text('Increment'),  
        ),  
        Text('Count: $_counter'),  
      ],  
    );  
  }  
}  

可以看到 Flutter 中直接使用了和 React 中同名的setState方法，不過不會有變量合并的東西，當然也有生命周期。

可以看到一個有狀態的組件需要兩個 Class，這樣寫的原因在于，Flutter 中 Widget 都是 immmutable 的，狀態組件的狀態保存在 State 中，組件仍然每次重新創建，Widget 在這里只是一種對組件的描述，Flutter 會 diff 轉換成 Element，然后轉換成 RenderObject 才渲染。

Flutter Widget 更多的渲染流程可以看這里。

實際上 Widget 只是作為組件結構一種描述，還可以帶來的好處是，你可以更方便的做一些主題性的組件, Flutter 官方提供的Material Components widgets和Cupertino (iOS-style) widgets質量就相當高，再配合 Flutter 亞秒級的Hot Reload，開發體驗可以說挺不錯的。

State Management

setState()可以很方便的管理組件內的數據，但是 Flutter 中狀態同樣是從上往下流轉的，因此也會遇到和 React 中同樣的問題，如果組件樹太深，逐層狀態創建就顯得很麻煩了，更不要說代碼的易讀和易維護性了。

InheritedWidget

同樣 Flutter 也有個context一樣的東西，那就是InheritedWidget，使用起來也很簡單。

class GlobalData extends InheritedWidget { 
  final int count; 
  GlobalData({Key key, this.count,Widget child}):super(key:key,child:child); 
  @override 
  bool updateShouldNotify(GlobalData oldWidget) { 
    return oldWidget.count != count; 
  } 
 
  static GlobalData of(BuildContext context) => context.inheritFromWidgetOfExactType(GlobalData); 
} 
 
class MyApp extends StatelessWidget { 
  // This widget is the root of your application. 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: 'Flutter Demo', 
      theme: ThemeData( 
        primarySwatch: Colors.blue, 
      ), 
      home: MyHomePage(title: 'Flutter Demo Home Page'), 
    ); 
  } 
} 
 
class MyHomePage extends StatefulWidget { 
  MyHomePage({Key key, this.title}) : super(key: key); 
 
  final String title; 
 
  @override 
  _MyHomePageState createState() => _MyHomePageState(); 
} 
 
class _MyHomePageState extends State<MyHomePage> { 
  int _counter = 0; 
 
  void _incrementCounter() { 
      _counter++; 
    }); 
  } 
 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text(widget.title), 
      ), 
      body: GlobalData( 
        count: _counter, 
        child: Center( 
          child: Column( 
            mainAxisAlignment: MainAxisAlignment.center, 
            children: <Widget>[ 
              Text( 
                'You have pushed the button this many times:', 
              ), 
              Text( 
                '$_counter', 
                style: Theme.of(context).textTheme.display1, 
              ), 
              Body(), 
              Body2() 
            ], 
          ), 
        ), 
      ), 
      floatingActionButton: FloatingActionButton( 
        onPressed: _incrementCounter, 
        tooltip: 'Increment', 
        child: Icon(Icons.add), 
      ), 
    ); 
  } 
} 
 
class Body extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    GlobalData globalData = GlobalData.of(context); 
    return Text(globalData.count.toString()); 
  } 
} 
 
class Body2 extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    // TODO: implement build 
    GlobalData globalData = GlobalData.of(context); 
    return Text(globalData.count.toString()); 
  } 

具體實現原理可以參考這里，不過 Google 封裝了一個更為上層的庫provider，具體使用可以看這里。

BlOC

BlOC是 Flutter team 提出建議的另一種更高級的數據組織方式，也是我最中意的方式。簡單來說：

Bloc = InheritedWidget + RxDart(Stream)

Dart 語言中內置了 Steam，Stream ~= Observable，配合RxDart, 然后加上StreamBuilder會是一種異常強大和自由的模式。

class GlobalData extends InheritedWidget { 
  final int count; 
  final Stream<String> timeInterval$ = new Stream.periodic(Duration(seconds: 10)).map((time) => new DateTime.now().toString()); 
  GlobalData({Key key, this.count,Widget child}):super(key:key,child:child); 
  @override 
  bool updateShouldNotify(GlobalData oldWidget) { 
    return oldWidget.count != count; 
  } 
 
  static GlobalData of(BuildContext context) => context.inheritFromWidgetOfExactType(GlobalData); 
 
} 
 
class TimerView extends StatelessWidget { 
 
  @override 
  Widget build(BuildContext context) { 
    GlobalData globalData = GlobalData.of(context); 
    return StreamBuilder( 
        stream: globalData.timeInterval$, 
        builder: (context, snapshot) { 
          return Text(snapshot?.data ?? ''); 
        } 
    ); 
  } 
} 

當然 Bloc 的問題在于

• 學習成本略高，Rx 的概念要吃透，不然你會抓狂
• 自由帶來的問題是，可能代碼不如 Redux 類的規整。

順便，今年 Apple 也擁抱了響應式，Combine(Rx like) + SwiftUI 也基本等于 Bloc 了。

所以，Rx 還是要趕緊學起來 😬

除去 Bloc，Flutter 中還是可以使用其他的方案，譬如：

• Flutter Redux
• 阿里閑魚的Fish Redux，據說性能很好。
• Mobx
• ……

展開來說現在的前端開發使用強大的框架頁面組裝已經不是難點了。開發的難點在于如何組合富交互所需的數據，也就是上面圖中的state部分。

更具體來說，是怎么優雅，高效，易維護地處理短暫數據(ephemeral state)setState()和需要共享的 App State 的問題，這是個工程性的問題，但往往也是日常開發最難的事情了，引用 Redux 作者 Dan 的一句：

“The rule of thumb is:Do whatever is less awkward.”

到這里，主要的部分已經講完了，有這些已經可以開發出一個不錯的 App 了。剩下的就當成一個 bonus 吧。

測試

Flutter debugger，測試都是出場自帶，用起來也不難。

// 測試在/test/目錄下面 
void main() { 
  testWidgets('Counter increments smoke test', (WidgetTester tester) async { 
    // Build our app and trigger a frame. 
    await tester.pumpWidget(MyApp()); 
 
    // Verify that our counter starts at 0. 
    expect(find.text('0'), findsOneWidget); 
    expect(find.text('1'), findsNothing); 
 
    // Tap the '+' icon and trigger a frame. 
    await tester.tap(find.byIcon(Icons.add)); 
    await tester.pump(); 
 
    // Verify that our counter has incremented. 
    expect(find.text('0'), findsNothing); 
    expect(find.text('1'), findsOneWidget); 
  }); 
} 

包管理，資源管理

類似與 JavaScript 的 npm，Flutter，也就是 Dart 也有自己的包倉庫。不過項目包的依賴使用 yaml 文件來描述:

name: app 
description: A new Flutter project. 
version: 1.0.0+1 
environment: 
  sdk: ">=2.1.0 <3.0.0" 
 
dependencies: 
  flutter: 
    sdk: flutter 
 
  cupertino_icons: ^0.1.2 

生命周期

移動應用總歸需要應用級別的生命周期，flutter 中使用生命周期鉤子，也非常的簡單：

class MyApp extends StatefulWidget { 
  @override 
  _MyAppState createState() => new _MyAppState(); 
} 
class _MyAppState extends State<MyApp> with WidgetsBindingObserver { 
  @override 
  void initState() { 
    super.initState(); 
    WidgetsBinding.instance.addObserver(this); 
  } 
 
  @override 
  void dispose() { 
    WidgetsBinding.instance.removeObserver(this); 
    super.dispose(); 
  } 
 
  @override 
  void didChangeAppLifecycleState(AppLifecycleState state) { 
    switch (state) { 
      case AppLifecycleState.inactive: 
        print('AppLifecycleState.inactive'); 
        break; 
      case AppLifecycleState.paused: 
        print('AppLifecycleState.paused'); 
        break; 
      case AppLifecycleState.resumed: 
        print('AppLifecycleState.resumed'); 
        break; 
      case AppLifecycleState.suspending: 
        print('AppLifecycleState.suspending'); 
        break; 
    } 
    super.didChangeAppLifecycleState(state); 
  } 
 
  @override 
  Widget build(BuildContext context) { 
      return Container(); 
  } 
} 

使用原生能力

和 ReactNative 類似，Flutter 也是使用類似事件的機制來使用平臺相關能力。

Flutter Web, Flutter Desktop

這些還在開發當中，鑒于對 Dart 喜歡，以及對 Flutter 性能的樂觀，這些倒是很值得期待。