Flutter 是一款跨平臺的移動應用 SDK，可通過同一套代碼構建高性能，高保真的 iOS 和 Android 應用。

文檔中提到 (https://flutter.io/technical-overview/):

Flutter 包括一個 react 風格的框架 , 一個 2D 渲染引擎, 現成的組件, 和開發者工具。

Flutter

希望這篇文章能夠為大多數 JavaScript 開發者提供快速簡便的介紹，並且我會嘗試使用 Flutter / Dart 和 Pub 包來類比 JS 和 npm 生態系統。

我在 React Native 歐洲 的演講《 React Native — Cross Platform & Beyond 》中，討論並演示了 React 生態系統中的一些不同技術， 包括 React Native Web, React Primitives 和 ReactXP, 並且我也有機會討論 Weex 和 Flutter。

在我過去幾年看過的所有前端技術中，我在嘗試了 Flutter 後最為興奮。在這篇文章中，我將討論為什麼它令我如此激動，並介紹如何儘快開始使用它。

如果你瞭解我，那麼我知道你在想什麼…

我是一名有著超過兩年半經驗的 React 與 React Native 開發者。我仍然非常看好 React / React Native，並且知道許多大公司正在大規模使用它們，但我總是喜歡看到其他想法或者尋找其他方法來實現類似的目標，無論是去學習或者改變我目前的技術棧。

Flutter

我可以做個概括：Flutter 令人驚歎, 我認為它在不久的將來是一個可行的選擇。

在使用了幾周 Flutter SDK 之後，我正在使用它構建我的第一個應用程序，到目前為止我真的很享受這個過程。

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

優點:

• 核心團隊維護的內置 UI 庫(Material，Cupertino)
• Dart＆Flutter 團隊緊密合作，優化移動 Dart VM，專門滿足 Flutter 的需求
• 文檔超級棒
• 強大的 CLI
• 我可以順利輕鬆地啟動和運行，而不會遇到很多障礙/錯誤
• 調試體驗很好，開箱即用的熱重新加載以及一系列關於調試技術的文檔 (https://flutter.io/debugging/)
• 核心團隊構建和維護的非常可靠的導航庫
• Dart 語言已有 6 年曆史並且已經成熟。雖然 Dart 是一種基於類的面向對象編程語言，但如果你進入函數式編程，Dart 確實擁有一等公民的函數並支持許多函數式編程結構。
• 對我來說比我預想的更容易理解
• Dart 是一種開箱即用的強類型語言，無需任何附加配置(比如: TypeScript / Flow)
• 如果你使用過 React，那麼你可能會習慣類似的狀態機制 (即生命週期方法和 setState)

缺點

• 你需要學習 Dart (這很簡單，相信我)
• 仍在測試中(目前已經發布正式版)
• 只針對 iOS 和 Android (目前也可用於 Web)
• 插件生態系統還很稚嫩，截至 2017 年 9 月只有 70 多個軟件包用於 Flutter (https://pub.dartlang.org/flutter)
• 佈局 / 樣式需要學習全新的範例 / API
• 要學習不同的項目配置 (pubspec.yaml vs package.json )

入門及其它觀點

• 我正在使用 VS Code 作為我的編輯器，使用 Dart Code 擴展，它可以提供非常好的開發體驗。Flutter 文檔強烈建議使用 IntelliJ IDE(https://www.jetbrains.com/idea/)，它有一些內置的支持，如熱/動態加載，而 VSCode 不具備這些功能。
• Flutter 有一個模塊系統，或者叫包管理系統 (https://pub.dartlang.org/)，它與 npm 有很多不同點。它的好壞取決於你對 npm 的看法。
• 我一開始對 Dart 一無所知，但很快就學會了。 它讓我想起了 TypeScript，也和 JavaScript 有一些相似之處
• 文檔中有一些非常棒的代碼實驗室和教程，它們對我有很大的幫助，我建議你查看一下: 1. 構建 UIS 2. 增加 Firebase 3. 構建佈局 4. 添加交互

讓我們開始創建一個新的項目吧

安裝 CLI (macOS)

如果你使用的是 Windows，請查閱此文檔 (https://flutter.io/setup/)。如需查看完整的 macOS 平臺下的安裝指南，請查看此文檔 (https://flutter.io/setup-macos/)。

首先，我們需要克隆包含 Flutter CLI 二進制文件的倉庫，並將其添加到我們的路徑中。我將這個倉庫克隆到一個文件夾中，然後在$ HOME / .bashrc / $ HOME / .zshrc 文件中添加克隆目錄路徑。

1、克隆倉庫:

git clone -b stable https://github.com/flutter/flutter.git

2、添加路徑:

export PATH=$HOME/bin/flutter/bin:$PATH (or whatever the path is to your installation)

3、從命令行運行 flutter doctor，以確保 flutter 路徑被識別，並查看是否有任何依賴項需要安裝來完成設置:

flutter doctor

安裝其他依賴項

如果你想構建 iOS 應用，你必須安裝 Xcode，對於構建 Android 應用，你必須安裝 Android Studio。

要了解更多關於兩個平臺的信息，請參閱這裡的文檔 (https://flutter.io/setup-macos/#platform-setup).

創建你的第一個 Flutter 應用程序

現在我們已經安裝了 flutter CLI，我們可以創建我們的第一個應用程序。 為此，我們需要運行 flutter create 命令:

flutter create myapp

這將為你創建一個新的應用程序。 現在，切換到新目錄，打開 iOS 模擬器或 android 模擬器，然後運行以下命令:

flutter run

這將在你已經打開的模擬器中啟動應用程序。 如果你同時打開了 iOS 和 Android 模擬器，你可以通過模擬器來運行這個應用程序:

flutter run -d android / flutter run -d iPhone

也可以同時運行

flutter run -d all

此時你應該在控制檯中看到一些關於重啟 app 的信息：

項目結構

你正在運行的代碼處於 lib/main.dart 文件中。

你也會注意到，我們有一個 android 文件夾和一個 iOS 文件夾，我們的本地項目就在這裡。

項目的配置位於 pubspec.yaml 文件中，類似於 JavaScript 生態系統中的 package.json 文件。

現在讓我們看一下 lib / main.dart 。

在文件的頂部我們看到一個 import :

import 'package:flutter/material.dart';

這是從哪裡來的？ 在 pubspec.yaml 文件中，你會注意到在依賴項下我們有一個單獨的 flutter 依賴項，我們在這裡引用它作為包: package:flutter/ 。 如果我們想要添加和導入其他依賴項，我們需要將新的依賴項加入 pubspec.yaml ，使它們作為依賴可以導入。

在這個文件中，我們還可以看到在頂部有一個名為 main 的函數。 在 Dart 中，main 是一個特殊的、必需的頂級函數，在這個函數中應用程序開始執行。 因為 Flutter 是由 Dart 構建的，main 函數也是這個工程的主入口。

void main() { runApp(new MyApp());}

這個函數調用 new MyApp () ，它本身調用一個類等等，類似於 React app，我們有一個由其他組件組成的主組件，然後由 ReactDOM.render 或 AppRegistry.registerComponent 進行渲染。

組件

Flutter 技術總覽 (https://flutter.io/technical-overview/) 中的一個核心原則就是：“一切皆組件”。

Widget 是每個 Flutter 應用程序的基本構件。 每個 Widget 都是用戶界面部分的不可變聲明。 與其他將視圖、控制器、佈局和其他屬性分離開來的框架不同，Flutter 有一個一致的、統一的對象模型: Widget。

在 web 術語 / JavaScript 方面，你可以將 Widget 看成與 Component 類似的東西。 Widget 通常由類內部組成，這些類中可能還有一些本地狀態和方法，也可能沒有。

如果你查看 main.dart ，可以發現類似 StatelessWidget 、StatefulWidget 、Center 、Text 的類引用。這些都是 Widget。如果想了解所有可用的 Widget，請查閱文檔 (https://docs.flutter.io/flutter/widgets/widgets-library.html)。

佈局與樣式

雖然 Dart 和大多數 Flutter 框架都非常簡單，但是使用佈局和樣式起初開始有點難以理解。

要記住的主要事情是，不像 web 樣式，甚至是 React Native 樣式 View 會完成所有的佈局和一些樣式，Flutter 佈局是由你選擇的組件的類型和它的佈局和樣式屬性的組合決定的，這通常取決於你使用的組件的類型。

例如，Column 接受一個子屬性數組，而不接受任何樣式屬性(只接受諸如 CrossAxisAlignment 和 direction 等佈局屬性) ，而 Container 接受佈局和樣式屬性的組合。

甚至還有一些佈局組件，比如 Padding，它僅接受 Widget，除了向 Widget 添加邊距之外不做其它任何事情。

參考這個完整的 Widgets 目錄，可以幫助你實現你想要的佈局類型，包括 Container、 Row、 Column、 Center、 GridView 等組件，所有這些組件都有自己的佈局規範。

Setstate / Lifecycle 函數

與 React 類似，Flutter 也有有狀態和無狀態組件或 Component 的概念。 有狀態組件可以創建狀態、更新狀態和銷燬狀態，這在某種程度上類似於用 React 時可能使用的生命週期方法。

甚至也有一個名為 setState 的方法更新狀態。 你可以在我們剛剛生成的項目中的 incrementCounter 方法中看到這個方法。

瞭解更多查看 StatefulWidget、 State 和 StatelessWidget。

總結

作為一個跨平臺應用程序開發的開發者，我會一直關注 React Native 的競爭對手。這對於那些可能因某種原因想要不同的客戶來說 Flutter 是一個可行的選擇。 我認為 Flutter 為我的客戶解決了一些問題，比如內置的類型系統、一流的 UI 庫、由核心團隊維護的導航庫等。

我會將 Flutter 添加到我的技術棧中，所以當我遇到 React Native 不能解決問題的情況時，我會使用 Flutter。一旦我覺得可以在生產環境使用 Flutter，我也會將我的第一個 Flutter 應用程序作為另一個選擇呈現給我的客戶。

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

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

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

版權

出處：公眾號：FENews

譯者：itxuye

英文原文地址：https://hackernoon.com/flutter-for-javascript-developers-35515e533317