我喜歡 Google Flutter

在 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