點燈坊

失くすものさえない今が強くなるチャンスよ

安裝 Flutter 開發環境 (macOS)

Sam Xiao's Avatar 2024-08-13

Flutter 號稱 Build for any screen，在 macOS 除了要安裝 Flutter SDK 外，還必須同時安裝 Android Studio 與 Xcode ，最後可使用 Flutter Doctor 檢查開發環境是否安裝成功。

Version

macOS Sonoma
Flutter 3.24

Prerequisites

$ sudo softwareupdate --install-rosetta --agree-to-license
  • 安裝 Rosetta 2

由於有些 Flutter component 尚未支援 Apple Silicon，必須靠 Rosetta 2 轉譯，若已經安裝 Rosetta 2 可忽略此步驟

Install Flutter SDK

setup01

  • 從 Fluttter 官網 下載最新版 SDK，並解壓縮到 ~/Flutter 目錄下

setup07

  • 在 Flutter 目錄下依版本建立 目錄

Add Flutter SDK to Path

export PATH=$HOME/bin:$HOME/.local/bin:/usr/local/bin:$HOME/Flutter/3.24/bin:$PATH
  • 將 $HOME/Flutter/3.24/bin 加入 PATH

setup08

Android Studio

flutter002

安裝 Android Studio 有兩種方法：

若你有使用其他 JetBrains 產品，如 WebStorm … 等，則建議使用 JetBrains Toolbox 安裝 Android Studio，如此可由 JetBrains Toolbox 幫你管理 Android Studio 版本與開啟 Flutter 專案

若從官網下載 Android Studio，由於安裝目錄不同，JetBrains Toolbox 會抓不到 Android Studio 而無法管理

flutter003

  • 按 Next 繼續

flutter010

  • 選擇 Standard 即可，之後只要一直按 Next 即可

SDK Manager

flutter011

More Action -> SDK Manager

flutter012

  • SDK Tools
    • Android SDK Build-Tools：On
    • Android SDK Command-line Tools (latest)：On

Plugin

flutter004

  • Pluggins
    • 安裝 Flutter pluggin，會順便安裝 Dart pluggin
    • 安裝完重新啟動 Android Studio
$ flutter doctor --android-licenses
  • 接受 Android license，一路上按 y 即可

Xcode

flutter005

  • 由 App Store 安裝 Xcode
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
  • 安裝完 Xcode 立即執行
$ brew install cocoapods
  • 使用 Homebrew 安裝 CocoaPods
$ xcodebuild -downloadPlatform iOS
  • 安裝 iOS Simulator
$ sudo xcodebuild -license
  • 接受 Xcode license，輸入 agree 即可

VS Code

$ brew install --cask visual-studio-code
  • 使用 Homebrew 安裝 VS Code

flutter006

  • 安裝 Flutter extension

Chrome

$ brew install --cask google-chrome
  • 使用 Homebrew 安裝 Chrome

Flutter Doctor

$ flutter doctor -v
  • 使用 Flutter Doctor 檢查 Flutter 開發環境是否安裝成功

flutter009

  • 全打勾就表示環境安裝成功

Conclusion

  • 安裝 Flutter 開發環境尚稱平順，唯需同時安裝 Android Studio 與 Xcode，因此需要大量 SSD 空間
  • Intel 的 macOS 不需安裝 Rosetta 2，但 Apple Silicon 則要安裝 Rosetta 2
  • 本安裝流程已經整合開發 Desktop、iOS、Android 與 Web 的所有流程，安裝好可同時開發 Desktop、iOS、Android 與 Web
  • 可隨時使用 flutter doctor -v 檢查是否有遺漏的工具或套件還沒安裝，安裝順序沒那麼重要，只要最後該安裝的都有安裝即可

# macOS # Android Studio # Flutter