Flutter安裝及環境配置

Flutter簡介

Flutter是Google的便攜式UI工具包，用於從單個代碼庫爲移動、Web和桌面構建漂亮的本機編譯應用程序。

Flutter是跨平臺的UI框架，目前穩定版本1.7(中文文章)，

官方網址: https://flutter.dev
中文社區網址：https://flutterchina.club/

底層使用獨立的Skia 2D渲染引擎，移動系統(Android、iOS等), 桌面系統(Mac、Windows、Linux等)等平臺只需要提供畫布，Flutter上層理論上可以使用任何語言（Flutter團隊選擇了Dart語言）來構築UI，最終編譯成本地代碼，由Skia渲染，最終顯示到終端上。Flutter架構圖如下:

從這裏我們可以看出，flutter跟RN、Weex之類的跨平臺框架有根本性的區別，RN、Weex最終還是使用的系統UI控件。不太贊成網上各種flutter的文章把RN、Weex拿出來跟它比，因爲有跟flutter像的跨平臺框架，那就是市面上各種遊戲引擎：cocos2d、Unity3D、Unreal Engine等(可能關注flutter的開發者大部分是做app開發以及web開發的)，可以說flutter就是在借鑑遊戲引擎的思路。

Flutter優勢

Flutter的特點

熱重載（Hot Reload），作爲一個安卓開發者，能熱重載真的太舒服了，利用Android Studio直接一個ctrl+s就可以保存並重載，模擬器立馬就可以看見效果。
一切皆爲Widget的理念，對於Flutter來說，手機應用裏的所有東西都是Widget，通過可組合的空間集合、豐富的動畫庫以及分層課擴展的架構實現了富有感染力的靈活界面設計。
藉助可移植的GPU加速的渲染引擎以及高性能本地代碼運行時以達到跨平臺設備的高質量用戶體驗。

Dart 的優勢

當時我學習 Dart 語言的時候，一直思考 Dart 有什麼優勢？只有 Google 這個親爹的原因嗎？我帶着這個思考查了不少資料，發現 Dart 的優勢有如下幾點：

Dart 支持AOT編譯和JIT編譯兩種方式
Dart 是單線程的，這意味着它根本不允許搶佔

JIT編譯

JIT編譯在開發過程中使用，編譯器速度特別快。然後，當一個應用程序準備發佈時，它被AOT編譯。因此，藉助先進的工具和編譯器，Dart具有兩全其美的優勢：極快的開發週期、快速的執行速度和極短啓動時間。

我們討論過一個有助於保持順暢的特性，那就是Dart能AOT編譯爲本地機器碼。預編譯的AOT代碼比JIT更具可預測性，因爲在運行時不需要暫停執行JIT分析或編譯。

AOT編譯

然而，AOT編譯代碼還有一個更大的優勢，那就是避免了“JavaScript橋樑”。當動態語言（如JavaScript）需要與平臺上的本地代碼互操作時，它們必須通過橋進行通信，這會導致上下文切換，從而必須保存特別多的狀態（可能會存儲到輔助存儲）。這些上下文切換具有雙重打擊，因爲它們不僅會減慢速度，還會導致嚴重的卡頓。

Flutter安裝

Flutter的安裝分爲

下面從這兩個方面來介紹(Linux系統下的安裝請參考官網，這裏不做具體介紹)。

由於在國內訪問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 以獲得有關鏡像服務器的最新動態。

Windows系統下的安裝

使用安裝Windows系統的電腦可以要爲Android開發Flutter應用，如果需要爲iOS開發Flutter應用，需要使用安裝MacOS系統的電腦。

系統要求

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

操作系統: Windows 7 或更高版本 (64-bit)
磁盤空間: 400 MB (不包括Android Studio的磁盤空間).
工具: Flutter 依賴下面這些命令行工具.
Git for Windows (Git命令行工具)

如果已安裝Git for Windows，請確保命令提示符或PowerShell中運行 git 命令，不然在後面運行flutter doctor時將出現Unable to find git in your PATH錯誤, 此時需要手動添加C:\Program Files\Git\bin至Path系統環境變量中。

獲取Flutter SDK

去flutter官網下載其最新可用的安裝包，點擊下載；注意，Flutter的渠道版本會不停變動，請以Flutter官網爲準。另外，在中國大陸地區，要想正常獲取安裝包列表或下載安裝包，可能需要翻牆，讀者也可以去Flutter github項目下去下載安裝包。
將安裝包zip解壓到你想安裝Flutter SDK的路徑（如：C:\src\flutter；注意，不要將flutter安裝到需要一些高權限的路徑如C:\Program Files\）。
在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行並啓動flutter命令行，接下來，你就可以在Flutter命令行運行flutter命令了。

上述命令爲當前終端窗口臨時設置PATH變量。要將flutter命令永久添加到路徑中，你需要添加以下環境變量到系統PATH：

轉到 “控制面板>用戶帳戶>用戶帳戶>更改我的環境變量”
在“用戶變量”下檢查是否有名爲“Path”的條目:
如果該條目存在, 追加 flutter\bin的全路徑，使用 ; 作爲分隔符.
如果條目不存在, 創建一個新用戶變量 Path ，然後將 flutter\bin的全路徑作爲它的值.
在“用戶變量”下檢查是否有名爲”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目，如果沒有，也添加它們。

重啓Windows以應用此更改。

運行 flutter doctor

打開一個新的命令提示符或PowerShell窗口並運行以下命令以查看是否需要安裝任何依賴項來完成安裝：

flutter doctor

該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter裏了，沒有必要單獨安裝Dart。仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務（以粗體顯示）。

例如:

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

第一次運行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項並自行編譯。以後再運行就會快得多。

以下各部分介紹如何執行這些任務並完成設置過程。你會看到在flutter doctor輸出中，如果你選擇使用IDE，我們提供了，IntelliJ IDEA，Android Studio和VS Code的插件，

一旦你安裝了任何缺失的依賴，再次運行flutter doctor命令來驗證你是否已經正確地設置了。

編輯器設置

使用 flutter 命令行工具，您可以使用任何編輯器來開發Flutter應用程序。輸入flutter help在提示符下查看可用的工具。

我們建議使用我們的插件來獲得豐富的IDE體驗，支持編輯，運行和調試Flutter應用程序。請參閱編輯器設置瞭解詳細步驟

Android設置

安裝Android Studio

要爲Android開發Flutter應用，您可以使用Mac，Windows或Linux（64位）機器.

Flutter需要安裝和配置Android Studio:

下載並安裝 Android Studio
啓動Android Studio，然後執行“Android Studio安裝嚮導”。這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具，這是Flutter爲Android開發時所必需的

設置您的Android設備

要準備在Android設備上運行並測試您的Flutter應用，您需要安裝Android 4.1（API level 16）或更高版本的Android設備.

在您的設備上啓用 開發人員選項 和 USB調試 。詳細說明可在Android文檔中找到。
使用USB將手機插入電腦。如果您的設備出現提示，請授權您的計算機訪問您的設備。
在終端中，運行 flutter devices 命令以驗證Flutter識別您連接的Android設備。
運行啓動您的應用程序 flutter run。

默認情況下，Flutter使用的Android SDK版本是基於你的 adb 工具版本。如果您想讓Flutter使用不同版本的Android SDK，則必須將該 ANDROID_HOME 環境變量設置爲SDK安裝目錄。

設置Android模擬器

要準備在Android模擬器上運行並測試您的Flutter應用，請按照以下步驟操作：

在您的機器上啓用 VM acceleration .
啓動 Android Studio>Tools>Android>AVD Manager 並選擇 Create Virtual Device.
選擇一個設備並選擇 Next。
爲要模擬的Android版本選擇一個或多個系統映像，然後選擇 Next. 建議使用 x86 或 x86_64 image .
在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啓用硬件加速.
驗證AVD配置是否正確，然後選擇 Finish。

有關上述步驟的詳細信息，請參閱 Managing AVDs.
在 Android Virtual Device Manager中, 點擊工具欄的 Run。模擬器啓動並顯示所選操作系統版本或設備的啓動畫面.
運行 flutter run 啓動您的設備. 連接的設備名是 Android SDK built for ,其中 platform 是芯片系列, 如 x86.

MacOS系統下的安裝

系統要求

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

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

獲取Flutter SDK

去flutter官網下載其最新可用的安裝包，轉到下載頁。

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

cd ~/development
unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.3.zip

添加flutter相關工具到path中：

export PATH=`pwd`/flutter/bin:$PATH

此代碼只能暫時針對當前命令行窗口設置PATH環境變量，要想永久將Flutter添加到PATH中請參考下面更新環境變量部分。

運行 flutter doctor

運行以下命令查看是否需要安裝其它依賴項來完成安裝：

flutter doctor

該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter裏了，沒有必要單獨安裝Dart。仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務（以粗體顯示）

例如:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環境變量等，請按照提示解決。下面貼一個筆者本機(mac)的環境變量配置，您可以對比修正：

  export PATH=/Users/用戶名/Documents/flutter/flutter/bin:$PATH
  export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄，替換爲你自己的即可
  export PATH=${PATH}:${ANDROID_HOME}/tools
  export PATH=${PATH}:${ANDROID_HOME}/platform-tools

第一次運行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項並自行編譯。以後再運行就會快得多。

以下各部分介紹如何執行這些任務並完成設置過程。你會看到在flutter doctor輸出中，如果你選擇使用IDE，我們提供了，IntelliJ IDEA，Android Studio和VS Code的插件，請參閱編輯器設置以瞭解安裝Flutter和Dart插件的步驟。

一旦你安裝了任何缺失的依賴，再次運行flutter doctor命令來驗證你是否已經正確地設置了。

更新環境變量

您在命令行只能更新當前會話的PATH變量，如Clone Flutter repo所示。但是，您可能需要的是永久更新此變量，以便您可以運行flutter命令在任何終端會話中。

對於所有終端會話永久修改此變量的步驟是和特定計算機系統相關的。通常，您會在打開新窗口時將設置環境變量的命令添加到執行的文件中。例如

確定您Flutter SDK的目錄，您將在步驟3中用到。
打開(或創建) $HOME/.bash_profile. 文件路徑和文件名可能在您的機器上不同.
添加以下行並更改[PATH_TO_FLUTTER_GIT_DIRECTORY]爲克隆Flutter的git repo的路徑:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 爲你flutter的路徑，比如“~/document/code”

export PATH=~/document/code/flutter/bin:$PATH

運行以下命令刷新當前終端窗口.

 source $HOME/.bash_profile

通過運行以下命令驗證目錄是否在已經在PATH中:

echo $PATH

編輯器設置

使用 flutter 命令行工具，您可以使用任何編輯器來開發Flutter應用程序。輸入flutter help在提示符下查看可用的工具。

我們建議使用我們的插件來獲得豐富的IDE體驗，支持編輯，運行和調試Flutter應用程序。請參閱編輯器設置瞭解詳細步驟

平臺設置

macOS支持爲iOS和Android開發Flutter應用程序。現在完成兩個平臺設置步驟中的至少一個，以便能夠構建並運行您的第一個Flutter應用程序，Android設置上面Windows系統下的安裝已經講過，下面主要講iOS設置。

iOS設置

安裝Xcode

要爲iOS開發Flutter應用程序，您需要Xcode 7.2或更高版本:

安裝Xcode 7.2或更新版本(通過鏈接下載或蘋果應用商店).
配置Xcode命令行工具以使用新安裝的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 對於大多數情況，當您想要使用最新版本的Xcode時，這是正確的路徑。如果您需要使用不同的版本，請指定相應路徑。
確保Xcode許可協議是通過打開一次Xcode或通過命令sudo xcodebuild -license同意過了.

使用Xcode，您可以在iOS設備或模擬器上運行Flutter應用程序。

設置iOS模擬器

要準備在iOS模擬器上運行並測試您的Flutter應用，請按以下步驟操作：

在Mac上，通過Spotlight或使用以下命令找到模擬器:

open -a Simulator

通過檢查模擬器硬件>設備菜單中的設置，確保您的模擬器正在使用64位設備（iPhone 5s或更高版本）.
根據您的開發機器的屏幕大小，模擬的高清屏iOS設備可能會使您的屏幕溢出。在模擬器的 Window> Scale 菜單下設置設備比例
運行 flutter run啓動您的應用.

安裝到iOS設備

要將您的Flutter應用安裝到iOS真機設備，您需要一些額外的工具和一個Apple帳戶，您還需要在Xcode中進行設置。

安裝 homebrew （如果已經安裝了brew,跳過此步驟）.
打開終端並運行這些命令來安裝用於將Flutter應用安裝到iOS設備的工具

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果這些命令中的任何一個失敗並出現錯誤，請運行brew doctor並按照說明解決問題.

遵循Xcode簽名流程來配置您的項目:

a. 在你Flutter項目目錄中通過 open ios/Runner.xcworkspace 打開默認的Xcode workspace.

b. 在Xcode中，選擇導航面板左側中的Runner項目

c. 在Runner target設置頁面中，確保在常規>簽名>團隊下選擇了您的開發團隊。當您選擇一個團隊時，Xcode會創建並下載開發證書，向您的設備註冊您的帳戶，並創建和下載配置文件（如果需要）
- 要開始您的第一個iOS開發項目，您可能需要使用您的Apple ID登錄Xcode.
  
  任何Apple ID都支持開發和測試。需要註冊Apple開發者計劃才能將您的應用分發到App Store. 查看differences between Apple membership types.
- 當您第一次attach真機設備進行iOS開發時，您需要同時信任你的Mac和該設備上的開發證書。首次將iOS設備連接到Mac時,請在對話框中選擇 Trust。
  
  然後，轉到iOS設備上的設置應用程序，選擇常規>設備管理並信任您的證書。
- 如果Xcode中的自動簽名失敗，請驗證項目的 General > Identity > Bundle Identifier 值是否唯一.
運行啓動您的應用程序 flutter run.

Flutter初體驗

以上步驟完成基本上Flutter環境就配置好了，下面就來體驗一下Flutter，IDE以Android Studio爲例。

創建新應用

打開Android Studio, 選擇File->New Flutter Project
選擇Flutter Application作爲project類型，然後點擊Next
輸入項目名稱(如myapp)，然後點擊Next
點擊Finish
等待Android Studio安裝SDK並創建項目

上述命令創建一個Flutter項目，項目名爲myapp，其中包含一個使用Material 組件的簡單演示應用程序。

在項目目錄中，您應用程序的代碼位於 lib/main.dart.

運行應用程序

定位到Android Studio工具欄
在 target selector 中, 選擇一個運行該應用的Android設備. 如果沒有列出可用，請選擇 Tools>Android>AVD Manager 並在那裏創建一個
在工具欄中點擊 Run圖標, 或者調用菜單項 Run > Run.
如果一切正常, 您應該在您的設備或模擬器上會看到啓動的應用程序:

體驗熱重載

Flutter 可以通過熱重載（hot reload）實現快速的開發週期，熱重載就是無需重啓應用程序就能實時加載修改後的代碼，並且不會丟失狀態（譯者語:如果是一個web開發者，那麼可以認爲這和webpack的熱重載是一樣的）。簡單的對代碼進行更改，然後告訴IDE或命令行工具你需要重新加載（點擊reload按鈕），你就會在你的設備或模擬器上看到更改。

將字符串
‘You have pushed the button this many times:’ 更改爲
‘You have clicked the button this many times:’
不要按“Stop”按鈕; 讓您的應用繼續運行。
要查看您的更改, 只需調用 Save All (cmd-s / ctrl-s), 或點擊熱重載按鈕 (帶有閃電⚡️圖標的按鈕).
你就會立即看到更新後的字符串。

flutter常用命令

flutter常用命令	命令說明
flutter	列出所有的命令
flutter help	查看具體命令的幫助信息
flutter doctor	查看是否還需要安裝其它依賴
flutter doctor -v	查看詳細信息
flutter channel	查看 Flutter SDK 所有分支
flutter channel stable	切換到stable分支
flutter upgrade	升級 Flutter SDK（此命令會同時更新 Flutter SDK 和你的 Flutter 項目依賴包
flutter packages get	獲取項目所有的依賴包（只更新項目依賴包，不包括 Flutter SDK）
flutter packages upgrade	獲取項目所有依賴包的最新版本（只更新項目依賴包，不包括 Flutter SDK）
flutter analyze	分析項目代碼
flutter build apk	android打包
flutter build ios	ios打包

結語

flutter最近在社區很火，但是還是會有人有疑惑，很多開發者會問哪些App使用了flutter，表明還是會對flutter存疑：主要是在應用商店能否過審、性能跟原生相比如何、生態怎麼樣、熱更跟動態化等這幾個方面。我個人對flutter很有信心，因爲它從原理上跟遊戲引擎是一致的，做app甚至做2d遊戲是完全沒有問題的，性能媲美原生，所以上面那幾個問題都可以參照遊戲，除了熱更這個問題其他的問題都可以解決，熱更我覺得技術上不存在問題，主要是應用商店政策限制。這也是爲什麼我之前說不要拿flutter跟RN、Weex這些框架比，容易讓人誤會，跟遊戲引擎拿來一比一切都很清晰了。

本人知識水平有限，若是本文有什麼地方不對，還請各位不吝賜教。