在 Google I/O ’17 上，Google 向我們介紹了 Flutter —— 一款新的用於創建移動應用的開源庫。
正如你所想的那樣，Flutter 是能夠幫助創建擁有漂亮 UI 界面的跨平臺移動應用解決方案。Flutter 的界面設計與 web 應用類似，因此，你能夠從 Flutter 上找到像使用 HTML/CSS 那樣熟悉的感覺。
Google 表示：
Flutter 將會幫你更容易，更快速的開發出界面美觀的移動應用。
聽起來很美好，但是首先要說的是，我對其他跨平臺解決方案，諸如 Xamarin，PhoneGap，Ionic，React Native 等並不是很認可。 大家都知道，這些解決方案互有利弊，很難選擇。雖然我並不確定 Flutter 是否會與它們有所不同，但是我很期待。
爲什麼要用 Flutter ？
你可能會好奇，然後問自己一個問題：
Flutter 有什麼創新之處？它是如何工作的？與 React Native 有什麼不同之處？
我不會在這裏討論技術問題，因爲其他人做得更好。如果你對 Flutter 的工作細節感興趣，我建議你讀讀這篇文章：Flutter 的革命性創新是什麼？你也可以在“ The Magic of Flutter ”演示中查看 Flutter 概念的總結。
簡要來說，Flutter 是一個移動 SDK ，允許我們創建混合移動應用（這樣你就可以編寫一份代碼，在 Android 和 iOS 都可以運行這個應用程序）。你在 Dart 中編寫代碼，這是一種由谷歌開發的語言，如果你以前用過 Java ，那看它會覺得非常熟悉。你不再需要用 XML 文件構建佈局樹，而是像這樣：
import 'package:flutter/material.dart';
class HelloFlutter extends StatelessWidget { @override
Widget build(BuildContext context) { return new MaterialApp(
title: "HelloFlutter",
home: new Scaffold(
appBar: new AppBar(
title: new Text("HelloFlutter"),
),
body: new Container(
child: new RaisedButton(onPressed: _handleOnPressed),
),
),
);
}
}正如你所看到的，佈局是由嵌套的組件（小部件）構建的。核心部件是 MaterialApp（這是整個應用程序），然後我們有了 Scaffold （這是主要的佈局結構），然後在裏面我們有 AppBar（像 Android 工具欄）和一些容器作爲主體。在內部，我們將放置佈局小部件 —— 文本、按鈕等。
#1 熱重載
好的，現在就開始吧！
我們從一個基本的應用開始。我們有三個按鈕，它們中的每一個都能改變文本的顏色：
現在，我們將會使用其中一個最酷的特性——熱重載。它能讓你的網頁做到立即重建。看看效果：
回顧下我們具體做了什麼？我們變更了一些代碼（在按鈕上的文本），當我們點擊“熱重載”（在 IntelliJ IDE 的頂部）並且我們能在短時間內就看到結果。是不是很酷炫？
熱重載不僅僅快還智能——如果你有一些數據已經被顯示（比如說，這個例子中的文本顏色），你可以在應用運行期間使用熱重載改變 UI ：內容還是一樣的。
#2 全套小部件 (Material Design)
Flutter 的另一個優點是，我們有一個非常豐富的內置 UI 組件的目錄。裏面有兩套小部件—— Material Design（針對 Android ）和 Cupertino（適用於 iOS ）。你可以選擇並輕鬆實現你想要的任何東西。比如說如果想要創建一個新的浮動動作按鈕，則可以像下面這樣:
更棒的是，你可以在各個平臺上實現任意的小部件。而且如果你已經實現了一些 Material Design 或 Cupertino 小部件，那麼它在每個 Android 和 iOS 設備上都是一樣的。你不需要擔心在衆多設備上看起來會有什麼不同。
#3 所有東西都是一個小部件
正如你在之前的 gif 中所看到的，創建 UI 非常簡單。這得感謝 Flutter 的核心原則 —— 所有東西都是一個小部件。你的 app 類是一個小部件（MaterialApp），你的整體佈局結構也是一個小部件（Scaffold），所有東西都是一個小部件（AppBar, Drawer, SnackBar）。想讓視圖居中？用 Center 就好（cmd/ctrl+Enter）！
有了 Fluter，創建 UI 就像用許多不同的小部件組合佈局一樣簡單。
Flutter 還有另外一個核心原則，組合優先於繼承。這意味着，如果你想要創建一些新的部件（widget），則可以使用幾個 Widget 組成新的 Widget ，而不是擴展現有的 Widget 類。
#4 Android / iOS 差異化主題
通常，我們希望我們的 Android 應用與 iOS 應用不同，不僅在顏色上，而且在小部件的尺寸和樣式上也有差異。在 Flutter 中可以用主題來實現這個目標：
正如你所看到的，我們爲工具欄（AppBar）設置了不同的顏色和高度。我們使用的是 Theme.of(Context).platform 參數來適配當前平臺（android/ios）：
import 'package:flutter/material.dart';
class HelloFlutter extends StatelessWidget { @override
Widget build(BuildContext context) { return new MaterialApp(
title: "HelloFlutter",
theme: new ThemeData(
primaryColor:
Theme.of(context).platform == TargetPlatform.iOS
? Colors.grey[100]
: Colors.blue),
home: new Scaffold(
appBar: new AppBar(
elevation:
Theme.of(context).platform == TargetPlatform.iOS
? 0.0
: 4.0,
title: new Text( "HelloFlutter",
),
),
body: new Center(child: new Text("Hello Flutter!")),
));
}
}#5 非常、非常、非常多的資源
雖然 Flutter 依然在 alpha 版，但 Flutter 的開發社區非常龐大而且參與度很高。正因如此 Flutter 纔有了很多資源的支持（類庫的形式，就像 Android 中的 Gradle 依賴包）。我們有很多諸如開源圖形、HTTP 請求、內容分享、存儲參數、訪問傳感器、部署 Firebase 等等多種多樣的類庫。當然，每個資源包都支持 Android 和 iOS 。Flutter庫列表 - Flutter Awesome
如何開始呢？
如果你喜歡 Flutter ，想自己嘗試一下，最好的辦法就是打開 Google Codelabs ：
在這個網站中，你將瞭解創建佈局的基礎：用 Flutter 構建漂亮的 UI
如果想嘗試更多的話，你可以試試 Flutter 的 Firebase