Flutter學習指南：開發環境搭建

愛學園發表於2018-11-08

本文由 愛學園平臺 進行聯合編輯整理輸出

原作者：愛學園——莫比烏斯環

雖說Flutter出現有一段時間了，但大家對它的瞭解卻不是很深，但直到2018谷歌開發者大會在上海的召開，它才真正進入開發者的世界。Flutter的出現為跨平臺開發開闢了新的方向，但是與之相應的中文學習文件卻不是很多，因此針對這一考慮我們會持續輸出一系列Flutter方面的實踐性學習文件以及配套demo供大家學習。萬里之行始於足下，下面我們就開始Flutter入坑的第一篇——Flutter開發環境搭建。

Flutter 安裝

關於Flutter的安裝，本文以 macOS 系統為例，就 macOS 系統下Flutter的安裝細節進行說明。其它平臺（Windowns、Linux）可參考官方文件安裝步驟。

自備梯子或使用國內映象

做過開發的都曉得，國內訪問Google是不行的，因此此處我們需要做一些前期配置，擁有梯子的可自行跳過。沒有梯子的同志也不用擔心，Flutter官方並不會放棄我們這麼重要的使用者，他們專門為中國開發者搭建了臨時映象，大家可以將環境變數加入到當前使用者環境中，具體操作如下：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

這裡的配置僅限當前視窗使用，如果需要永久使用請參考後面小節更新環境變數配置 注意：此映象為臨時映象，並不能保證一直可用，讀者可以關注Using Flutter in China以獲得有關映象伺服器的最新動態。

獲取Flutter SDK

獲取 Flutter 有多種方式：

去Flutter官網下載穩定可用的安裝包，轉到下載頁
第一種方式可能需要翻牆，也可直接從Github上Flutter專案下去下載安裝包，轉到下載頁。對應指令git clone -b dev https://github.com/flutter/flutter.git(可針對當前版本做命令的調整)

上述兩種第一種需要解壓，第二種不需要，總之將它們放置到您想放到的地方

更新環境變數

大家都知道此時flutter還不是全域性變數，為了方便我們以後的呼叫，這裡我們需要做一些全域性性的配置，具體命令如下：

export PATH= ~/developer/flutter/bin:$PATH //flutter 存放位置，替換為您自己的即可
export ANDROID_HOME="~/Library/Android/sdk" //android sdk目錄，替換為您自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

開啟（或建立）~/.bash_profile檔案,將下面的命令貼上進去,注意：此處Flutter與Android SDK的路徑需要替換為自己的，儲存之後執行source $~/.bash_profile重新整理當前終端視窗。

執行 flutter doctor

經過上面的步驟，此時我們就可以執行以下命令檢視是否需要安裝其它依賴項來完成安裝，這個過程第一次可能需要耗費一段時間，下次就會快很多：

flutter doctor
複製程式碼

該命令依賴檢查您的環境並在終端視窗顯示報告。如下是我執行輸出的結果：

執行異常情況：

[-] 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環境變數等，請按照提示解決。

執行正常情況：

這裡我們只關注紅色方框內的，這裡有四部分下面逐一解釋（Android，先不考慮IOS情況，處理一致）：

第一部分監測的是Flutter相關依賴項結果，如果第一次執行會先去下載；
第二部分針對Android SDK和Java方面的檢測，如果缺失，對應條目前方會顯示✗紅色標記，那就需要您根據缺失條目提示進行配置，這裡不做深入；
第三部分針對編譯器（Android Studio）內部外掛（Flutter、Dart）的安裝檢測，外掛的安裝將會在下一章節詳細講解；
第四部分是對連線裝置的檢測，我這裡沒有啟動裝置，則顯示無可用裝置。

編譯器Flutter外掛安裝

適合Flutter使用的編譯器有很多（IDE、VSCode、Xcode），這裡我以Android Studio為例演示下如何安裝Flutter相關外掛（注意：這裡Android Studio需要 3.0或更高版本）：

首先啟動Android Studio，開啟外掛首選項(Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)；
選擇 Browse repositories…, 選擇 Flutter 外掛並點選 install（此處Dart外掛回一起安裝）；
重啟Android Studio後外掛生效；