[譯] 爲 JavaScript 程序員準備的 Flutter 指南

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。