• 原文地址：Flutter for JavaScript Developers
• 原文作者：Nader Dabit
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：lsvih
• 校對者：bambooom

為 JavaScript 程式設計師準備的 Flutter 指南

Flutter 是一款用同一套程式碼構建高效能、高保真的 iOS 及安卓應用的跨平臺移動端應用 SDK。

文件中提到：

Flutter 包括一個 react 風格的框架、一個 2D 渲染引擎、一些預製的外掛以及開發者工具。

文字希望能快速為 JavaScript 開發者們提供一個簡練的入門指南，我會試著以 JS 與 npm 生態系統來類比 Flutter / Dart 與 Pub 包庫。

如果你對最新的 Flutter 教程、庫、公告及社群的更新感興趣，我建議您訂閱雙週刊 Flutter Newsletter。

---

我在 React Native EU 的演講 React Native — 跨平臺及超越中討論並演示了 React 生態系統中 React Native Web、React Primitives 和 ReactXP 的不同之處，並且我也有機會討論 Weex 及 Flutter 的不同之處。

在嘗試 Flutter 之後，我認為它是近幾年我所關注的前端技術中最讓我激動的一個。在本文中，我將討論為何它如此令我激動，並介紹如何儘可能快的入門 Flutter。

如果你認識我，那麼我知道你正在想什麼…

我是一名有著超過兩年半經驗的 React 與 React Native 開發者。現在，我仍然看好 React 和 React Native，並且我也知道有許多大公司正在使用它們，但我仍然樂於看到其他的能達到相同目的的想法方法，這無關乎我是否要去學習或改變技術棧。

Flutter

我可以做個概括：Flutter 令人驚歎, 我相信近幾年它會成為更多人的選擇。

在使用了幾周 Flutter SDK 之後，我正在應用它製作我的第一個 App，我十分享受這個過程。

在我開始介紹如何入門 Flutter 前，我將首先回顧一下我對它的 SDK 的優缺點的看法。

優點

• 內建由核心團隊維護的 UI 庫（Material 及 Cupertino）。
• Dart 團隊與 Flutter 團隊緊密合作，專門針對 Flutter 優化移動裝置的 Dart VM。
• 有著嶄新的、酷炫的文件。
• 強大的 CLI。
• 我能輕鬆、順利地入門與執行它，沒有碰到各種障礙與 Bug。
• 開箱即用的熱載入功能，使得除錯的體驗相當好。此外，還有一系列關於除錯技術的很好的文件。
• 有由核心團隊構建並維護的 nav 庫，可靠且有見地。
• Dart 語言誕生 6 年了，相當成熟。雖然 Dart 是一種基於類的物件導向程式語言，但如果你想用函數語言程式設計，Dart 也有著作為第一公民的函式，並且支援許多函數語言程式設計結構。
• Dart 比我想象中的更容易入門，我十分喜歡它。
• Dart 是一種無需任何多餘配置的開箱即用的強型別語言（比如：TypeScript、Flow）。
• 如果你用過 React，會發現它有類似的狀態機制（比如 lifecycle 方法與 setState）。

缺點

• 你要去學習 Dart（相信我，這很簡單）。
• 仍在測試中。
• 目標平臺僅為 iOS 和安卓。
• 外掛生態系統還很稚嫩，pub.dartlang.org/flutter 在 2017 年 9 月還只有 70 餘個包。
• 佈局與編寫樣式需要學習一種全新的正規化與 API。
• 需要學習不一樣的專案配置（pubspec.yaml vs package.json）。

入門及其它觀點

• Flutter 文件推薦了 VS Code 編輯器與 IntelliJ IDE。儘管 IntelliJ IDE 內建支援熱載入、線上載入這些 VS Code 沒有的功能，但我還是選擇使用安裝了 Dart Code extension 外掛的 VS Code 編輯器，並得到了很好的開發體驗。
• Flutter 有一個模組系統，或者叫包管理系統 —— Pub Dart Package Manager，它與 npm 有很多不同點。它的好壞取決於你對 npm 的看法。
• 我之前並沒有 Dart 相關的知識，但我很快就入門了。它讓我想起了 TypeScript，並且與 JavaScript 也有一些相似之處。
• 文件中有幾個相當不錯的程式碼實驗室與教程，建議去查閱一番：1. 構建 UIS 2. 增加 Firebase 3. 構建佈局 4. 增加互動

說的夠多了，現在讓我們開始建立一個新的工程吧！

在 macOS 中安裝 CLI

如果你使用的是 Windows，請查閱 此文件。

如需檢視完整的 macOS 平臺下的安裝指南，請檢視 此文件。

首先，我們需要克隆包含 flutter CLI 二進位制檔案的 repo，然後將其新增到系統目錄中。比如我將 repo 克隆到了專門用於存放二進位制檔案的目錄下，然後將這個新目錄加到了 $HOME/.bashrc 和 $HOME/.zshrc 檔案中。

1. 克隆 repo：

git clone -b alpha https://github.com/flutter/flutter.git
複製程式碼

2. 增加路徑：

export PATH=$HOME/bin/flutter/bin:$PATH (或者填你選擇的安裝路徑)
複製程式碼

3. 在命令列中執行 flutter doctor，檢測 flutter 路徑能被正確識別，並安裝一切所需的依賴：

flutter doctor
複製程式碼

安裝其它依賴

如果你要部署 iOS app，那麼必須安裝 Xcode；如果你要部署安卓 app，那麼必須要安裝 Android Studio。

瞭解關於安裝這兩個不同平臺的知識，請參閱文件：文件。

建立你的第一個 Flutter app

現在我們已經安裝好了 flutter CLI，可以建立我們的第一個 app 了。請執行 flutter create 命令：

flutter create myapp
複製程式碼

此命令會幫助你建立一個新的 app，進入新目錄，開啟 iOS 模擬器或安卓模擬器，執行以下命令：

flutter run
複製程式碼

此命令會在你開啟的模擬器中執行 app。如果你同時開啟了 iOS 與安卓模擬器，你可以用下面的命令來將程式傳入指定的模擬器：

flutter run -d android / flutter run -d iPhone
複製程式碼

也可以同時執行：

flutter run -d all
複製程式碼

此時你應該在控制檯中看到了關於重啟 app 的資訊：

專案結構

你正在執行的程式碼處於 lib/main.dart 檔案中。

你會發現有一個 andoird 資料夾和一個 iOS 資料夾，原生的專案存在這些目錄中。

專案的配置在 pubspec.yaml 中，此檔案與 JavaScript 生態系統中的 package.json 類似。

現在將目光轉向 lib/main.dart。

在檔案的頭部，可以看見一個 import：

import ‘package:flutter/material.dart’;

這個依賴檔案是哪兒來的？請檢視 pubspec.yaml 檔案，可以發現在依賴列表中單獨有一個 flutter 依賴項，在這兒是引用的 package:flutter/。如果想新增或匯入其它依賴項，那麼需要將新的依賴加入 pubspec.yaml，然後用過 import 來使用它們。

在 main.dart 的頭部，我們還可以看到有一個名為 main 的函式。在 Dart 中，main 是一個特殊的、必要的、頂級的函式，也是 app 開始執行的地方。因為 Flutter 是由 Dart 構建的，main 也是這個工程的主入口。

void main() {
  runApp(new MyApp());
}
複製程式碼

此函式呼叫了 new MyApp()，這個類。與 React App 類似，有一個由多個元件組合而成的主元件，然後呼叫 ReactDOM.render 或 AppRegistry.registerComponent 進行渲染。

Widget

Flutter 技術總覽中的一個核心原則就是：“一切皆 Widget”。

Widget 是每個 Flutter app 的最基本的構建模組。每個 Widget 都是使用者介面的一個不可變定義。與其它框架分離檢視、控制器、佈局和其它屬性不同，Flutter 有著統一的、一致的物件模型：Widget。

類比 Web 術語或 JavaScript，你可以將 Widget 看成與 Component 類似的東西。Widget 通常由內部類構成，這些類可能包含或不包含一些本地狀態（local state）或方法。

如果你觀察 main.dart，可以發現類似 StatelessWidget、StatefulWidget、Center、Text 的類引用。這些都是 Widget。如果想了解所有可用的 Widget，請查閱文件。

佈局與編寫樣式

雖然 Dart 和多數 Flutter 框架都很容易使用，但進行佈局與編寫樣式讓我最開始頭疼了一陣子。

需要重點注意的是，與編寫 Web 樣式不同，以及與 React Native 的 View 會完成所有的佈局和一些樣式不同，Flutter 的佈局由你選擇的 Widget 型別及本身的佈局與樣式屬性共同決定，也就是說它通常取決於你使用的 Widget。

例如，Column 能接收多個子 Widget，但不接受任何樣式屬性（CrossAxisAlignment 及 direction 等佈局屬性除外）；而 Container 能接收各種佈局及樣式屬性。

Flutter 還有一些佈局專用的元件，比如 Padding，它僅能接收一個子 Widget，但除了給子 Widget 新增 padding（邊距）之外不會做其它任何事。

請參考這個完整的 Widget 列表，能幫你使用 Container、Row、Column、Center、GridView 及其它有著自己佈局規範的元件實現佈局。

SetState 及生命週期函式

與 React 類似，Flutter 也有有狀態、無狀態元件或 Widget。有狀態元件可以建立、更新、銷燬狀態，與 React 中使用的生命週期函式類似。

在 Flutter 中，也有一個名為 setState 的函式用來更新狀態。你可以在我們剛才建立的專案的 _incrementCounter 方法中看到此函式。

更多資訊請查閱：StatefulWidget, State 和 StatelessWidget。

總結

作為專門製作跨平臺應用的開發者，我會保持關注 React Native 的競爭對手。對於客戶來說，也多了一種選擇，他們可能會因為某些原因而要求使用 Fluter。我認為 Flutter 為我的客戶帶來了一些他們想要的東西，比如內建的型別系統、一流的 UI 庫、由核心團隊維護的 nav 庫等。

我會把 Flutter 加入我的技術棧中，當碰到 React Native 無法解決的問題和情況時，我將會使用 Flutter。只要我覺得可以將它用於生產環境，我會向客戶展示我的第一個 Flutter app，供他們選擇這個技術。

我叫 Nader Dabit，是一名 AWS Mobile 的開發者，開發了 AppSync、Amplify 等應用，同時也是 React Native Training 的創始人。

如果你喜歡 React 和 React Native，歡迎在 Devchat.tv 訂閱我們的 podcast - React Native Radio。

此外，Manning Publications 已經出版了我的書 React Native in Action，歡迎閱讀。

如果你喜歡這篇文章，請點個贊吧~

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。