Flutter深刻淺出--（一）Flutter 是何方神聖？

（一）什麼是 Flutter

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。 Flutter能夠與現有的代碼一塊兒工做。在全世界，Flutter正在被愈來愈多的開發者和組織使用，而且Flutter是徹底免費、開源的。

從官方的的介紹來看能夠總結成三點：

1. 跨平臺 如今Flutter至少能夠跨 4 種平臺，甚至支持嵌入式開發。咱們經常使用的有Linux、Android、IOS，甚至能夠在谷歌最新的操做系統上Fuchsia進行運行，通過第三方擴展，甚至能夠跑在MacOS和Windows上，到目前爲止，Flutter算是支持平臺最多的框架了，良好的跨平臺性，直接帶來的好處就是減小開發成本。

2. 原生用戶界面： 它是原生的，讓咱們的體驗更好，性能更好。用官方的話講就是平滑而天然的滑動效果和平臺感知，爲您的用戶帶來全新的體驗。

3. 開源免費：同Android系統同樣，這些都是免費開源的。

（二）主流跨平臺框架對比

1. ReactNative 和 Weex：執行效率是硬傷，首頁不能用RN已經是共識，並且目前在同一Android和iOS代碼方面尚存在不足。

2. 微信小程序：屬於微信內的生態閉環，更適合工具類和小遊戲，通常都做爲原生APP的延伸入口。

3. Flutter：在渲染技術上，Flutter選擇了本身實現GDI，因爲有更好的可控性，使用了新的語言Dart,避免了RN的那種經過橋接器與Javascript通信致使效率低下的問題，因此在性能方面比RN更高一籌；有經驗的開發者能夠打開Android手機開發者選項裏面的顯示邊界佈局，發現Flutter的佈局是一個總體。說明Flutter的渲染沒用使用原生控件進行渲染。

技術類型	UI渲染方式	性能	開發效率	動態化	框架表明
H5 + 原生	WebView 渲染	通常	高	✔️	Cordova、Ionic
JavaScript + 原生渲染	原生控件渲染	好	高	✔️	RN、Weex
自繪UI + 原生	調用系統API渲染	好	高	不支持	Flutter

（三）Flutter 的特色

1. 快速開發
   毫秒級的熱重載，修改後，您的應用界面會當即更新。使用豐富的、徹底可定製的widget在幾分鐘內構建原生界面。
   

   

2. 富有表現力和靈活的UI
   使用Flutter內置美麗的Material Design和Cupertino的widget、豐富的motion API、平滑而天然的滑動效果和平臺感知，爲您的用戶帶來全新體驗。

3. 響應式框架
   使用Flutter的響應式框架和一系列基礎widget，能夠輕鬆構建您的用戶界面。使用功能強大且靈活的API（針對2D、動畫、手勢、效果等）能夠幫助開發者解決艱難的UI挑戰。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // 告訴Flutter state已經改變, Flutter會調用build()，更新顯示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 當 setState 被調用時，這個方法都會從新執行.
    // Flutter 對此方法作了優化，使從新執行變的很快
    // 因此你能夠從新構建任何須要更新的東西，而無需分別去修改各個widget
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}
複製代碼

瀏覽 widget 目錄 ，瞭解更多關於 響應式框架.

1. 訪問本地功能和SDK並支持插件
   Flutter能夠複用Java、Swift或ObjC代碼，訪問Android和iOS上的原生系統功能。另外經過Flutter插件也能夠訪問原生系統功能，好比藍牙、相機、WiFi等等。

2. 跨平臺自繪引擎
   Flutter與Hybrid App、React Native這些跨平臺技術不一樣，Flutter既沒用使用WebView，也沒有使用各個平臺的原生控件，而是自己實現一個統一接口的渲染引擎來繪製UI，這樣作能夠保證不一樣平臺UI的一致性。另外採用自繪引擎後，Flutter在佈局過程當中不須要像RN那樣要在JavaScript和Native之間通訊，能夠節省性能開銷。Flutter使用Skia做爲其2D渲染引擎，Skia是Google的一個2D圖形處理函數庫，包含字型、座標轉換，以及點陣圖都有高效能且簡潔的表現，Skia是跨平臺的，並提供了很是友好的API。

3. 採用Dart開發
   Flutter App採用Dart語言來開發。與JavaScript相比，Dart在JIT（即時編譯）模式下，速度與JavaScript基本持平。可是當Dart以 AOT（運行前編譯）模式運行時，Dart性能要高於JavaScript。