八月部門給分配的分享任務，由於項目太趕，推遲一個月。
選 Flutter 這個主題，是因為現在它慢慢流行起來了，而我卻不了解，故而借此契機，上手試試。
簡介
Flutter 是 Google 推出的跨平台開發框架。
⽬前⽀支持 iOS, Android 開發，對 web 端和桌面端支持還在開發中。
2017 年年 5 月，Flutter 發布第一個版本。
2018 年年 12 月，第一個穩定版本， 1.0 發 布。
Flutter 的開發語言是 Dart 。
Flutter 實現了一整套的跨平台 UI 框架，包括控件，布局，渲染和開發語言。
Flutter Engine 依靠跨平台的 Skia 進行渲染，只依賴系統的圖形繪制接口，因此能夠很大程度地抹除不同平台的體驗差異。
采⽤的 Dart 語言，性能優於其他跨平 台框架所使⽤的 JavaScript 。
再加上 Google 的⽀持，Flutter 最近⼀年多發展迅速。
Flutter ⽀持 macOS, Windows 和 Linux 作為開發環境。IDE 有 Android Studio, IntelliJ 和 Visual Studio Code。
Stack Overflow Trends 對比
圖表鏈接 https://insights.stackoverflow.com/trends?tags=react-native,flutter,ionic,cordova,xamarin
Dart 簡介
☸ OOP
☸ 強類型
☸ 專門為客戶端優化
☸ 跨平台 (iOS, Android)
☸ 可移植 (ARM/x86)
☸ JIT 和 AOT 運行模式
Language Tour:https://dart.dev/guides/language/language-tour
Dart 第三⽅庫: https://pub.dev/packages
Flutter 分層架構
由底至上，Framework 層組成部分為：
☆ Foundation: 封裝的⼯具類和方法;
☆ Animation: 動畫相關;
☆ Painting: 封裝了 Engine 提供的繪制接口;
☆ Gestures: 觸摸事件處理，⼿勢識別器;
☆ Rendering: 渲染庫;
☆ Widgets: 組件庫;
☆ Material: Material Design ⻛格組件庫;
☆ Cupertino: iOS ⻛格的組件庫;
Flutter 項目結構
☸ lib: 寫 Dart 代碼的地方
☸ ios, android: 原生的宿主項⽬目
☸ build: 運行的中間產物
☸ test: 單元測試
☸ pubspec.yaml: 第三方庫以及資源管理文件
☸ External Libraries: 庫⽂件
(images 是手動創建的⽬錄)
用 widgets 構建界⾯
Everything is a widget.
Widget 是什么
它們的作用分別為：
-
Widget: 存放渲染內容和布局信息
-
RenderObjectElement: 存放上下文，持有 Widget 和 RenderObject
-
RenderObject: 布局和繪制
StatelessWidget 和 StatefulWidget
-
StatelessWidget: 靜態展示
-
StatefulWidget: 動態展示(隨外部事件改變)
與原⽣交互
Flutter 提供了 Platform Channels 機制來實現與原生的交互。
詳細可參考 https://flutter.dev/docs/development/platform-integration/platform-channels
參考
● https://flutter.dev/docs
● https://dart.dev
● https://www.yuque.com/xytech/flutter
● https://juejin.im/post/5d728d376fb9a06b051811f4#heading-23
PDF 講稿和 demo 可訪問 Github