Flutter 即學即用系列部落格——01 環境搭建

前言

工欲善其事，必先利其器

所以第一篇我們來說說 Flutter 環境的搭建。

筆者這邊使用的是 MAC 電腦，因此以 MAC 電腦的環境搭建為例。

Windows 或者 Linux 也是類似的操作。

Flutter 有英文版的官網和中文網，大家可以根據自己的喜好和情況進行選擇。

點選下面的連結可以到對應的安裝頁面。
Flutter 官網安裝連結
Flutter 中文網安裝連結

我們這邊以官網為例進行說明。

目錄

1. 配置映象

點選進入官網，可以看到下圖：

我們點選 Using Flutter in China 進入：

可以看到主要是讓我們配置映象站點。

所以我們就將要求的兩個環境變數新增到系統就可以了。

開啟 terminal，看下當前使用者下面是否有 bash_profile 檔案，執行命令：

vi ~/.bash_profile
複製程式碼

如果底部有

"~/.bash_profile" [New File]

說明之前沒有存在過這個檔案。

不管之前是否存在過該檔案，我們在末尾追加上面的兩個環境變數即可。

如果不熟悉 vi 操作，可以參考下面兩篇文章或者額外瞭解。
linux Vi操作和使用方法詳解
Linux vi/vim

將上面兩個環境變數新增到 bash_profile 檔案，檔案新增的兩行應該類似下面（映象地址可能有變動，以上面官網為主，筆者此刻就是下面的）：

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

接著執行命令：

source ~/.bash_profile  
echo $PUB_HOSTED_URL
複製程式碼

如果列印出了你輸入的映象，說明沒有問題，設定成功了。

主要目的是追加兩個環境變數，如果你習慣用檔案開啟，也可以開啟檔案後直接追加

回到安裝頁面，點選 macOS。

2. 獲取 Flutter SDK

從圖中可以看到，當前的目標是獲取 Flutter SDK。

點選藍色按鈕，下載 Flutter SDK。
下載完成之後解壓到自己想放置的目錄（建議路徑不要包含中文）。

這裡假設我們將壓縮包解壓到的路徑為 ~/flutter。

首先把下載下來的壓縮包移動到 ~/flutter。
我這邊下載的壓縮包為flutter_macos_v1.0.0-stable.zip，執行命令

unzip flutter_macos_v1.0.0-stable.zip
複製程式碼

執行完成之後可以看到當前目錄多了一個 flutter 資料夾。
接下來就是要把 flutter 設定到環境變數以便在任何地方都可以執行 flutter 命令。
執行如下命令：

cd flutter/  
pwd
複製程式碼

控制視窗會列印 flutter 根目錄。我這邊為/Users/nesger/flutter/flutter。

跟上面設定兩個環境變數操作類似，首先開啟檔案~/.bash_profile。
新增下面語句：

export FLUTTER_ROOT=/Users/nesger/flutter/flutter
export PATH=$FLUTTER_ROOT/bin:$PATH
複製程式碼

這裡定義了 flutter 根目錄並將其下面的 bin 目錄設定到 PATH 裡面。
儲存退出後執行

source ~/.bash_profile
複製程式碼

NOTE：執行該命令後你當前視窗和新開的視窗就都可以直接執行 flutter 命令了。但是之前開的視窗就不可以了。如果需要之前的視窗也可以，就需要在對應視窗執行上面的 source ~/.bash_profile 命令

3. 執行 flutter doctor 完善相關工具鏈

執行

flutter doctor
複製程式碼

會列印 flutter 需要的工具鏈是否完善。(NOTE: 這個命令後面會多次用到)

可以看出一些端倪。
顯示一些警告。
按照上面提示進行處理即可。

舉個例子：

✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
複製程式碼

這邊說 Android licenses 沒有 accepted，執行

flutter doctor --android-licenses
複製程式碼

然後不斷點選 y 表示同意就可以了。

我們執行之後，再使用

flutter doctor
複製程式碼

可以看到已經修復了

接下來就是 iOS toolchain 以及 Android Studio 兩個外掛的安裝。 對於 Android 開發來說，其實 iOS toolchain 不修復也沒問題。 我們先修復 flutter 外掛安裝。

NOTE：Android Studio 版本需要 3.0 或者更高版本，不然會有坑，這邊為了演示一下坑及遇到的解決方法。所以這邊先用版本 2.3.3 進行演示。讀者最好先升級版本到 3.0。步驟是一樣的。

第一步：Android Studio->Preferences

第二步：點選左側 Plugins

第三步：輸入 flutter，點選 Search in repositories

第四步：點選 Install

第五步：dart 一起安裝

安裝完成之後重啟 Android Studio，然後在終端執行命令

flutter doctor
複製程式碼

可以看到 Flutter 外掛安裝好了，只不過這裡提示版本不夠新。
如果你的 Android Studio 版本為 3.0 或者更高，就不會報錯，那麼可以忽略下面的修復步驟。

修復步驟：
重啟 Android Studio 並沒有看到直接建立 Flutter 專案。
筆者這邊 Android Studio 版本為 2.3.3。
而 Flutter 需要 Android Studio 3.0 或者更高版本支援。
這邊更新 Android Studio 之後重啟。
可以看到執行 flutter doctor 命令之後 Android Studio 確實是 3.3 版本了。

但是 Flutter 依然不是最新的，需要到 plugins 去更新。
此外，還需要更新 dart。
更新完之後就可以看到建立 Flutter 專案了。

到了這裡基本上對於 Android 開發的你來說環境搭建就完成了。

4. 擴充套件

可以看到上面有個 iOS toolchain，基於下面幾點，我想修復這個。

1. 我的機器安裝了 Xcode。
2. 剛接觸 Flutter，想多點嘗試，也想看看 Flutter 程式碼在 iOS 執行效果。
3. 聽說 iOS 開發都用模擬器，想體驗下 iOS 模擬器。 Android 的模擬器大家都懂，反正我大部分是用真機除錯。

所以按照上面的提示，Xcode 完全安裝以及執行相應命令。 但是遇到了一個坑，就是依然報錯。 所以我直接將提示的命令一步執行，結果可以了。

在 GitHub 上面還幫助到了一個 iOS 開發者。
flutter doctor 提示 iOS toolchain 有些錯誤

更多環境搭建問題和解決方案大家都可以提 issue 哦~
也許別人剛好就解決了你遇到的問題
Flutter Issue 集合