安裝Flutter環境(Mac)

Steven_唐
Aug 23, 2022

這次來分享使用Flutter之前需要經歷的安裝步驟,因為最近換了新的Macbook需要重新裝一次Flutter,因此剛好順便來寫篇文章~

下載Flutter SDK

選擇目前使用的作業系統。Install | Flutter

依Mac的處理器型號選擇下載的版本,接著按照官方文件操作解壓縮。

安裝完成後透過終端機輸入剛剛解壓縮後的Flutter檔案路徑:

export PATH=$PATH: {Flutter路徑} /flutter/bin

接著輸入:

flutter doctor

接著會出現以下訊息

這些訊息代表需要安裝以或設定的項目,左邊出現綠色勾勾代表設定完成。
第一次安裝Flutter應該大部分都會是紅色的X,代表還沒有安裝該項目。黃色驚嘆號代表可能還沒有設定完整。都設定完成後下方會顯示一條『No issues found!』。

接著會按照由上而下的順序安裝Flutter要求的條件。

AndroidStudio

Download Android Studio & App Tools — Android Developers

M1晶片系列選擇64-bit, ARM

安裝完後開啟AndroidStudio 點選Plugins,接著尋找Flutter按下安裝(示意圖為已經安裝),基本上安裝Flutter系統會詢問是否要順便下載Dart,這步驟按同意就好,如果沒有一樣在這裡尋找Dart並安裝。

安裝Flutter & Dart

可以在Installed檢查是否有安裝成功。

Android-licenses授權

輸入指令:

flutter doctor --android-licenses

接下來只要按Y就可以設定完成。

如果不小心按到N 再次輸入flutter會發現黃色驚嘆號

此時執行一次上面的指令,這次只會出現上次按到N的選項,將該選項改為Y就OK了!

Xcode

首先請不要到App Store下載Xcode,很容易出現下載進度卡住或其他一堆奇怪的狀況。

要下載Xcode建議直接從Apple官網下載:More — Downloads — Apple Developer

或是透過Xcodes下載

安裝完成後開啟Xcode,點選上方工具列Xcode內Preferences

點選Locations選擇要使用CommandLineTools。(欄位不要是空白的就好)

安裝CocoaPods

可以參考CocoaPods官方頁面安裝。CocoaPods.org

當然也可以透過HomeBrew安裝(只是不知道為什麽這次我在新電腦用HomeBrew安裝一直有問題QQ)

Chrome

雖然現在已經投入Edge的懷抱沒有在用Chrome,但…還是得裝QQ。有時候還是會需要Chrome 來 Build App。

IntelliJ IDEA

這是最後一個要安裝的項目了,老實說自從Android Studio有支援 Apple M1晶片後就很少用IntelliJ了。但是…既然是Flutter要求的我看還是裝一下吧~

Download IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrains

直接下載不用付費的Community版本就可以了,這裡記得選取目前使用的Mac晶片版本。

如果準備在IntelliJ開發Flutter記得一樣也要安裝:

經過以上步驟到這邊在跑一次flutter doctor應該就可以看到滿滿的綠色勾勾了~

最後想補充第一次接觸AndroidStudio的怎麼安裝模擬器。點選上方紅色匡選觸按鈕在點擊Create device。

進入後點選想要的裝置,接著下一步。

選擇需要的版本

確認細節後就能按下結束。

點選Start鈕就能開啟模擬器啦~

--

--