作者 | 屠敏

一套代碼可支持 Android 和 iOS 雙端運行，你 Get 了嗎？

它就是 Flutter。其目標是為了解決移動中的兩個重要問題：一是實現原生應用的性能和與平台的集成，二是提供一個多平台，可移植的 UI 工具包來支持高效的應用開發。

何為 Flutter？

「Flutter 可幫助你更容易、更快速的開發出界面美觀的移動應用。」Google 官方如是說。

實則，Flutter 是由 Google 的工程師團隊打造的一款移動 UI 框架，它使用的是 Google 自己開發的網路編程語言——Dart 語言，因此，開發者只要使用過 Java 或 JavaScript 之類的語言，那麼 Flutter 也極易上手。

Flutter 旨在幫助開發者創建擁有美觀 UI 界面、高性能、高穩定、高幀率、低延遲的跨平台（Android 和 iOS）移動應用。Flutter 的界面設計與 Web 應用類似，所以開發者很容易在 Flutter 上找到類似 HTML/CSS 編碼的感覺。

和 React Native 相比，雖然使用的語言不同，但 Flutter 也提供響應式的視圖。此外，Flutter 開發出來的應用在不同的平台用起來跟原生應用具有一樣的體驗。例如，返回圖標 Android 和 iOS 是不一樣的；滾動內容滾動到底的反饋也是不一樣的。

Flutter 發展歷程

2017 年 Google I/O 大會上，Google 首次推出了一款新的用於創建移動應用的開源庫——Flutter；

2018 年初，Google 發布了 Flutter 的第一個 beta 版本；

在今年 5 月的 Google I/O 大會上，Flutter 更新到了 beta 3 版本；

今天，Flutter 發布了首個預覽版，這意味著 Flutter 進入了正式版（1.0）發布前的最後階段。

觀其發展，就在上個月，Flutter 進入了 GitHub stars 排行榜前 100 名，如今已有 27k 個 star。經歷了短短一年的時間，Flutter 生態系統得以快速增長，活躍的 Flutter 用戶也增長了 50%。由此可見，Flutter 在開發者中受到了熱烈的歡迎，其未來的發展不容小覷。

Flutter 的優勢

為何自 Flutter 發布以來，受到了諸多開發者較高的評價？自然與其優點息息相關：

高生產率：

• 一套代碼可以開發出 Android 和 iOS 應用；
• 使用更少的代碼實現更多的功能，即使在單一的操作系統之上，使用更現代的、更具有表達性的開發語言及聲明方法，也可以完成更多的功能；
• 開發原型和迭代更加方便；
• 在應用運行的時候就可以修改代碼並重新載入（使用熱重載）修改後的功能；
• 直接修改崩潰的 bug，然後繼續從崩潰的地方執行調試；

創建優雅的、可定製的用戶界面：

• Flutter 內置了對紙墨設計（Material Design）的支持，提供了豐富的 UI 控制項庫可以用來創建紙墨設計風格的 UI；
• 提供了可定製的 UI 框架，不再受制於手機平台控制項的支持。

使用 Flutter 可以幹什麼？

快速開發：

Flutter 的熱重載可幫助用戶快速地進行測試、構建 UI、添加功能並更快地修復錯誤。在 iOS 和 Android 模擬器或真機上可以在亞秒內重載，並且不會丟失狀態。

富有表現力，漂亮的用戶界面：

使用 Flutter 內置美麗的 Material Design 和 Cupertino（iOS風格）widget、豐富的 motion API、平滑而自然的滑動效果和平台感知，為開發者帶來全新體驗。

現代的，響應式框架

使用 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"),
],
);
}
}

訪問本地功能和SDK

通過平台相關的 API、第三方 SDK 和原生代碼讓開發者的應用變得強大易用。 Flutter 允許開發者復用現有的 Java、Swift 或 ObjC 代碼，訪問 iOS 和 Android 上的原生系統功能和系統 SDK。

訪問平台功能非常簡單。以下是 interop example（互操作示例）中的一個片段：

Future<Null> getBatteryLevel() async {
var batteryLevel = "unknown";
try {
int result = await methodChannel.invokeMethod("getBatteryLevel");
batteryLevel = "Battery level: $result%";
} on PlatformException {
batteryLevel = "Failed to get battery level.";
}
setState(() {
_batteryLevel = batteryLevel;
});
}

統一的應用開發體驗

Flutter 擁有豐富的工具和庫，可以輕鬆地同時在 iOS 和 Android 系統中實現開發者想要完成的功能。即使開發者沒有任何的移動端開發體驗， Flutter 也是一種輕鬆快捷的方式來構建漂亮的移動應用程序。 如果開發者已是一位經驗豐富的 iOS 或 Android 開發人員，則可以使用 Flutter 作為視圖(View)層， 並可以使用已經用 Java / ObjC / Swift 完成的部分（Flutter 支持混合開發）。

Flutter 首個預覽版的發布

目前 Flutter 已發布了第一個預覽版。此次，Flutter 開發團隊主要專註於讓 Flutter 適用於更多的應用場景，並修復 Bug 並讓 Flutter 更加穩定。其中相比 beta 3 主要更新包括：

• 增加了對帶有 ARMv7 指令集晶元的 32 位 iOS 設備的支持，使得 Flutter 兼容包括 iPad Mini 和 iPhone 5c 在內的更多設備；
• 完善了 video player package 以支持更多的視頻格式並變得更穩定；
• 支持了 Firebase 動態鏈接（Dynamic Links）以支持跨平台創建和處理鏈接；
• 並進一步改進如何將 Flutter 小部件添加到現有 Android 和 iOS 應用的文檔。

除此之外，Visual Studio Code 的 Flutter 擴展新版本帶來了新的大綱視圖，語句完成以及直接從 Visual Studio Code 啟動模擬器等功能。

Flutter 預覽版也從社區中得到了很多支持，來自外部的貢獻就包括 Flutter 對硬體鍵盤和條形碼掃描儀、視頻錄製、圖像的支持。此外，還有許多新軟體包對 Flutter 包站點的貢獻，例如 Flutter Platform Widgets，一組可自適應 iOS 或 Android 的小部件； mlkit，Firebase MLKit API 的包裝類（wrapper）； 序列動畫（Sequence Animation）。

那麼該如何更新呢？

如果你已經在 beta channel 上了，只需要運行一句命令：

$ flutter upgrade

如何更快上手學習 Flutter？

就國內而言，使用 Flutter 的用戶僅次於美國和印度，擁有世界第三多的 Flutter 用戶。國內科技巨頭中，阿里巴巴基於 Flutter 開發的應用程序已經有了上千萬安裝量，騰訊也將使用 Flutter 推出 NOW 直播手機客戶端。那麼國內的開發者該如何快速上手 Flutter？

對此，Flutter 團隊正式發布了中文 Flutter 網站：https://flutter-io.cn/。其中包含了源自社區的許多中文 Flutter 資料，從而幫助國內開發者更好地使用 Flutter。

此外，還可以通過以下資源進行深入了解：

• I/0 分享視頻：https://www.youtube.com/playlist?list=PL0o58xSX-Jvi6zBDe7SW4W6h5hauQ-xxF
• 技術周刊：https://flutterweekly.net/
• 實踐視頻：https://www.youtube.com/watch?v=syd0c9Vi2hg
• 開發視頻：https://www.youtube.com/watch?v=yr8F2S3Amas
• Github 地址：https://github.com/flutter/flutter
• Flutter 網站：https://flutter.io/
• Flutter - 不一樣的跨平台解決方案：https://juejin.im/post/5afd77466fb9a07aab2a12da
• Flutter 初嘗：從 Java 無縫過渡：http://wuxiaolong.me/2018/03/08/Flutter/
• 最近用 Flutter 做了幾個 APP：https://zhuanlan.zhihu.com/p/37232700

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！