Flutter的安裝和配置

Flutter · 發表 2019-02-12 20:54:54

摘要： Flutter 是谷歌的移動 UI 框架，可以快速在 iOS 和 Android 上構建高質量的原生使用者介面, 並且是未來新作業系統 Fuchsia 的預設開發套件在全世界， Flutter 正在被越來越多的開發者和組織使用，並且 Flutter 是完全免費、...

Flutter 是谷歌的移動 UI 框架，可以快速在 iOS 和 Android 上構建高質量的原生使用者介面, 並且是未來新作業系統 Fuchsia 的預設開發套件
在全世界， Flutter 正在被越來越多的開發者和組織使用，並且 Flutter 是完全免費、開源的—- Flutter中文網
Flutter 同時支援 Windows 、 Linux 和 MacOS 作業系統作為開發環境，並且在 Android Studio 和 VS Code 兩個 IDE 上都提供了全功能的支援
Flutter 以 Dart 語言為開發語言(之後的文章會介紹)

跨平臺框架

在 Flutter 誕生之前，已經有許多跨平臺 UI 框架的方案，比如基 於WebView 的 Cordova 、 AppCan 等，還有使用 HTML+JavaScript 渲染成原生控制元件的 React Native 、 Weex 等(雖然我只用過 React Native )
基於 WebView 的框架
- 優點很明顯，它們幾乎可以完全繼承現代 Web 開發的所有成果（豐富得多的控制元件庫、滿足各種需求的頁面框架、完全的動態化、自動化測試工具等等），當然也包括 Web 開發人員，不需要太多的學習和遷移成本就可以開發一個 App
- 缺點也很致命, 在對體驗和效能有較高要求的情況下, WebView 的渲染效率和 JavaScript 執行效能太差。再加上 Android 各個系統版本和裝置廠商的定製，很難保證所在所有裝置上都能提供一致的體驗
React Native 一類的框架
- 將最終渲染工作交還給了系統，雖然同樣使用類 HTML+JS 的 UI 構建邏輯，但是最終會生成對應的自定義原生控制元件，以充分利用原生控制元件相對於 WebView 的較高的繪製效率
- 同時這種策略也將框架本身和 App 開發者綁在了系統的控制元件上，不僅框架本身需要處理大量平臺相關的邏輯，隨著系統版本變化和 API 的變化，開發者可能也需要處理不同平臺的差異，甚至有些特性只能在部分平臺上實現，這樣框架的跨平臺特性就會大打折扣
Flutter 框架
- Flutter 則開闢了一種全新的思路，從頭到尾重寫一套跨平臺的 UI 框架，包括 UI 控制元件、渲染邏輯甚至開發語言
- Flutter 使用自己的高效能渲染引擎來繪製 widget , Flutter 使用 C 、 C ++ 、 Dart 和 Skia （2D渲染引擎）構建
- 在 iOS 上， Flutter 引擎的 C/C ++ 程式碼使用 LLVM 編譯，任何 Dart 程式碼都是 AOT 編譯為原生代碼的， Flutter 應用程式使用本機指令集執行（不涉及直譯器）
- 而在 Android 下， Flutter 引擎的 C/C ++ 程式碼是用 Android 的 NDK 編譯的，任何 Dart 程式碼都是 AOT 編譯成原生代碼的， Flutter 應用程式依然使用本機指令集執行（不涉及直譯器）

`Flutter` 安裝

可參考官網的安裝Flutter , 支援 Windows 、 Linux 和 MacOS 作業系統
我使用的系統是 MacOS 作業系統

系統要求

要安裝並執行 Flutter ，您的開發環境必須滿足以下最低要求:

作業系統: macOS (64-bit)
磁碟空間: 700 MB (不包括 Xcode 或 Android Studio 的磁碟空間）.
工具: Flutter 依賴下面這些命令列工具.
- bash , mkdir , rm , git , curl , unzip , which

獲取 `Flutter SDK`

下載SDK

去 Flutter 官網下載其最新可用的安裝包，轉到下載頁
注意， Flutter 的渠道版本會不停變動，請以 Flutter 官網為準
另外，在中國大陸地區，要想正常獲取安裝包列表或下載安裝包，可能需要翻牆，讀者也可以去 Flutter github 專案下去下載安裝包，轉到下載頁

環境配置

解壓SDK並把解壓好的檔案全部放在你想要放置的位置, 建議和其他開發語言的SDK放置在一起, 比如 ~/Library/Flutter
為了方便後續使用，需要將專案根目錄下 bin 路徑加入環境變數 PATH 中
- 編輯器開啟 ~/.bash_profile 檔案, 新增如下

# Flutter 相關配置
# xxx是你自己的Flutter資料夾路徑
export PATH=/xxx/Flutter/bin:$PATH

由於在國內訪問 Flutter 有時可能會受到限制， Flutter 官方為中國開發者搭建了臨時映象，大家可以將如下環境變數加入到使用者環境變數中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意

此映象為臨時映象，並不能保證一直可用，讀者可以參考詳情請參考 Using Flutter in China 以獲得有關映象伺服器的最新動態

儲存檔案, 並更新當前配置

# 執行命令
source ~/.bash_profile

驗證 flutter/bin 目錄是否在你的PATH中

# 執行下面命令
echo $PATH

如果安裝成功, 會輸出類似 /xxx/Flutter/bin 的路徑

安裝開發工具

安裝Android Studio

下載並安裝 Android Studio
啟動 Android Studio ，然後執行 Android Studio 安裝嚮導, 這將安裝最新的 Android SDK ， Android SDK 平臺工具和 Android SDK 構建工具, 這是 Flutter 開發 Android 應用時所必備的
安裝完成後, 配置一個需要的 Android 模擬器

安裝Xcode

在 App Store 搜尋最新版本 Xcode 下載安裝即可

VSCode

開發 IDE ，直接去官網下載安裝即可

環境配置檢測

通過 flutter doctor 命令來執行 Flutter 的安裝程式了，經過一段時間的下載和安裝， Flutter 會輸出安裝結果(時間可能會比較久)

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale en-NZ)
[!] Android toolchain - develop for Android devices (Android SDK 26.0.2)
! Some Android licenses not accepted.To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
✗ Missing Xcode dependency: Python module "six".
Install via 'pip install six' or 'sudo easy_install six'.
✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.io/platform-plugins
To install:
brew install cocoapods
pod setup
[✓] Android Studio
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.0)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2017.1.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[!] Connected devices
! No devices available

! Doctor found issues in 5 categories.

[✓]
[!]

開發工具

執行 flutter doctor 命令可看到相關資訊

Flutter 的版本和資訊
Flutter 執行所需的 Android 工具鏈，有些許可證沒有接受，輸入提示命令，輸入 y 確認
Flutter 執行所需的 iOS 工具鏈不滿足
AS 、 IDEA 的 Flutter 外掛沒有安裝，所以需要安裝，因此需要配置 AS 或 IDEA
有可用的連線裝置

`Android Studio`

開啟外掛選擇項 Preferences > Plugins
選擇 Browse repositories ，搜尋 Flutter 外掛並安裝(同時自動安裝 Dart 外掛)
外掛安裝完成後, 重啟 Android Studio 後外掛生效

這時候在命令列執行 flutter doctor ，可以看到 Android Studio 已經好了

[✓] Android Studio (version 3.2)

iOS配置

在進行 iOS 配置之前, 首先需要安裝 CocoaPods , 可自行百度
安裝 CocoaPods 後, 在執行 flutter doctor 命令, 可能會出現如下問題
此時在終端中依次執行出現的命令即可

[!] iOS toolchain - develop for iOS devices

# 可能出現的命令, 若出現, 依次執行出現的命令即可, 未出現的可不執行
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

這時候在命令列執行 flutter doctor ，可以看到 iOS 相關配置也好了

VSCode外掛

在擴充套件中搜索 Flutter 和 Dart 安裝後, 過載即可

配置完成

此刻, 在執行 flutter doctor 命令, 應該就沒有問題了

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.3 18D109, locale
zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.30.2)
[✓] Connected device (1 available)

• No issues found!

建立Flutter應用

CSCode建立

中文版: vscode -> 檢視 -> 命令面板 -> Flutter: new project -> 輸入專案名稱

注意

專案名稱不支援大寫字母

Android Studio建立

開啟 Android studio 就可以看見 Flutter 工程模板如下

命令建立

flutter create helloflutter

這裡建立了一個名為 helloflutter 的 Dart package

引數介紹

要建立外掛包，請使用 --template=plugin 引數執行 flutter create
使用 --org 選項指定您的組織，並使用反向域名錶示法。該值用於生成的 Android 和 iOS 程式碼中的各種包和包識別符號。

flutter create --org com.example --template=plugin helloflutter

預設情況下，外掛專案針對 iOS 程式碼使用 Objective-C ， Android 程式碼使用 Java 。
如果您更喜歡 Swift 或 Kotlin ，則可以使用 -i 或 -a 為 iOS 或 Android 指定語言。例如：

flutter create --template=plugin -i swift -a kotlin helloflutter