如何在Mac建立Flutter開發環境

這篇是以Mac搭配以Android Studio做為開發環境的說明文章

1.到官方Flutter SDK下載SDK
下載後預設會是在~/Download底下

下載後的sdk是一個zip檔,所以先建立一個要放置Flutter sdk資料夾,假設在「我的文件」下建立一個名為「sdk」的資料夾

接著切換到sdk目錄底下
指令:
 cd ~/Documents/sdk 

2.解壓縮
假設從官網下載的版本為: flutter_macos_v1.7.8+hotfix.4-stable.zip

指令:
 unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip 

此時會開始進行解壓縮...

於是在sdk資料夾就會出現解壓縮後的Flutter SDK
3.加入環境變數
開啟設定檔
指令:
如果你是用bash:   
 vi ~/.bash_profile 

如果你是用zsh: 
 vi ~/.zshrc 

在設定檔內填入下列路徑
 export PATH="$PATH:/Users/使用者名稱/Documents/sdk/flutter/bin" 


於是Flutter的sdk就已經建立好了


4.在Android studio加入Flutter Plugin
a.打開偏好設定(Preference),可以從工具列的「IntelliJ IDEA/Preference」或是直接按下「command + ,」
b.搜尋「plugin」,找到「Flutter」,按下「install」
接下來會提醒你也要安裝Dart語言的外掛,按下Yes
安裝完後會要求重啟Android Studio。重啟之後進入「Preference」設定Flutter SDK的路徑
將路徑設定為原本放置sdk的路徑,例如: ~/Document/sdk/flutter

如果路徑指定正確的話,也會同時顯示Flutter的版本

設定Dart SDK的路徑
一樣是在「Languages & Frameworks」的項目下,找到Dart,將路徑設定為Flutter SDK目錄下的bin/cache/dart-sdk
例如:~/Documents/sdk/flutter/bin/cache/dart-sdk

檢查還缺哪些未完成安裝的項目
指令:
 flutter doctor 



這個時候你會發現,有驚嘆號的地方就是還沒有完成的部份,要一一要去解決它。
像是 Android toolchain - Some Android licenses not accepted. 就有提示你該使用指令:
 flutter doctor --android-licenses 

接下來會出現要你同意,就按下y 的條款

通通都按y之後,就可以了

還有一個地方也出現了驚嘆號 Xcode - CocoaPods not installed.
也是依照提示輸入指令
 sudo gem install cocoapods 

下載相關的套件安裝中


 如此就可以進行Flutter的開發了

參考資料:

留言

這個網誌中的熱門文章

Android使用Callback做為傳遞資料/通知的方法

如何實作從API抓取資料顯示在列表頁(ListView)上

Mac安裝JDK後仍出現沒有runtime的錯誤 No Java runtime present, requesting install