前言 工欲善其事,必先利其器 所以第一篇我們來說說 Flutter 環境的搭建。 筆者這邊使用的是 MAC 電腦,因此以 MAC 電腦的環境搭建為例。 Windows 或者 Linux 也是類似的操作。 Flutter 有英文版的官網和中文網,大家可以根據自己的喜好和情況進行選擇。 點擊下麵的鏈接可 ...
前言
工欲善其事,必先利其器
所以第一篇我們來說說 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,基於下麵幾點,我想修複這個。
- 我的機器安裝了 Xcode。
- 剛接觸 Flutter,想多點嘗試,也想看看 Flutter 代碼在 iOS 運行效果。
- 聽說 iOS 開發都用模擬器,想體驗下 iOS 模擬器。
Android 的模擬器大家都懂,反正我大部分是用真機調試。
所以按照上面的提示,Xcode 完全安裝以及運行相應命令。
但是遇到了一個坑,就是依然報錯。
所以我直接將提示的命令一步執行,結果可以了。
在 GitHub 上面還幫助到了一個 iOS 開發者。
flutter doctor 提示 iOS toolchain 有些錯誤
更多環境搭建問題和解決方案大家都可以提 issue 哦~
也許別人剛好就解決了你遇到的問題
Flutter Issue 集合