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 集合