Mac 配置 Flutter 環境,執行 iOS Android 兩端

n以夢為馬 發表於 2020-05-11

Flutter 入門,從下載 Flutter SDK 到成功執行在 iOS Android 平臺。編輯器:Xcode(11.3.1)、 Android Studio(3.2.1)、VSCode(1.43.2)。

1.在 Flutter 官網 下載其最新可用的安裝包,解壓之後,放在想安裝的目錄下,記住檔案目錄,比如:/Users/liupengkun/Documents/flutter_learn

2.接著開啟終端,輸入命令列 open ~/.bash_profile,開啟檔案後,新增 flutter 相關工具到 path 中:

// 路徑要使用你上面放置Sdk的目錄路徑
export PATH=/Users/liupengkun/Documents/flutter_learn/flutter/bin:$PATH
複製程式碼

3.使用映象,由於在國內訪問 Flutter 有時可能會受到限制,Flutter 官方為中國開發者搭建了臨時映象(此映象為臨時映象,並不能保證一直可用,讀者可以參考 Using Flutter in China 以獲得有關映象伺服器的最新動態。):

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

4.改完之後,關閉 bash_profile 檔案,執行 source ~/.bash_profile 更新配置環境變數。

5.接著終端執行 flutter doctor 檢測環境,報了以下問題:

Mac 配置 Flutter 環境,執行 iOS Android 兩端

每個人的環境不太一樣,因此 flutter doctor 檢測出來的問題也會有差異。因為我電腦之前使用過 Xcode、 Android Studio、VSCode,所以報的問題相對較少,IntelliJ IDEA 倒是用的不多。

接下來開始解決報的問題:

! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

複製程式碼

這個簡單,接受這些協議即可。直接終端執行 flutter doctor --android-licenses,一直輸入 y 並換行,直至成功。

✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
複製程式碼

這個意思也很清楚,開啟 AS,在 configure 裡安裝 Flutter 以及 Dart 外掛:

Mac 配置 Flutter 環境,執行 iOS Android 兩端

關於 ! No devices available 的問題後面會講到。

接著重新在終端執行 flutter doctor:

Mac 配置 Flutter 環境,執行 iOS Android 兩端

發現剛剛的兩個問題已經好了,關於 IntelliJ IDEA,暫時我這邊很少用到 IntelliJ IDEA,先擱置,其實想解決也很簡單,在 IntelliJ IDEA 裡安裝 Flutter 以及 Dart 外掛就可以了。

6.建立 Flutter 專案並執行

cd 到存放專案的資料夾,然後執行命令:

flutter create hello_flutter
複製程式碼

稍等一會兒,專案就構建成功了:

Mac 配置 Flutter 環境,執行 iOS Android 兩端

開啟上圖 ios 或 android 專案,並執行。

Mac 配置 Flutter 環境,執行 iOS Android 兩端

關於 ! No devices available 的問題,我這裡測試的結論是,用模擬器執行的話是沒作用的,只有真機執行,才會有改變:

Mac 配置 Flutter 環境,執行 iOS Android 兩端


  • 2020.04.08 更新
    • 問題 1:之前安裝並配置好了 flutter,但是之後執行 flutter doctor時,報錯 zsh: command not found: flutter,暫時性解決方案是執行source ~/.bash_profile;徹底解決方案是複製一份 .bash_profile 檔案,改名為 .zprofile,終端執行 source ~./zprofile
    • 問題 2:用 VSCode 執行專案到 iOS 模擬器時,一直 Launching...,用 Xcode 直接執行也不行,解決方案是手動刪除 ~/Library/Developer/Xcode/DerivedData 資料夾下的檔案,重新執行。
    • 問題 3:執行命令時有時卡在了 Waiting for another flutter command to release the startup lock,解決方案是刪除 flutter 的安裝目錄 /bin/cache/ 下的 lockfile 檔案。

原文地址:Mac 配置 Flutter 環境,執行 iOS Android 兩端

更多文章請點選:Articles