Flutter_ Section 2: Setup and Installation

9. Prerequisites for Flutter Development

  • 老師推薦用 Android Studio
  • 因為蘋果有 ”Code Signing”， 測試還是會需要一台Mac
  • Flutter有Toggle Platform可以看在 Android or iOS rendering效果
  • 老師會提到Simulator又有時候講Emulator，他們的差異可以參考這邊

10. Overview of the process

If you have a Mac

Outcome: You will be set up to develop Flutter apps for both iOS and Android.

There are quite a few steps involved in installing Flutter, I’ve compiled a list of things that can go wrong and how to solve them at the following page. So before you start,  first bookmark the troubleshooting page and head over if you encounter any issues:

Check here for troubleshooting

Steps

  1. Install the Flutter SDK
  2. Install Android Studio
  3. Install the Android Emulator
  4. Install Xcode and command-line tools
  5. Test the iOS Simulator

Start Here For Step-by-Step Installation VideosIf you prefer to use a written guide, the Flutter team have created a comprehensive one here:

https://flutter.dev/docs/get-started/install/macos

16. Mac Setup Step1 – Install the Flutter SDK

Ｍinimun System Requirement:

空間: 10GB

老師超好心有先列Mac安裝可能遇到的問題解決

在S2-21. Mac Installation Troubleshooting

下載頁面

https://docs.flutter.dev/get-started/install/macos

這個畫面打開來已經跟課程完全不一樣了！

以下紀錄自己換句話說找對應的功能

先選 Recommended

  • 課程的並沒有這邊的選項
  • 先選Recommemded看看

開始安裝

https://docs.flutter.dev/get-started/install/macos/mobile-ios

這頁一開始有提到Xcode
  • Xcode 16
  • 要有Git
  • 發現Xcode超連結點進去超複雜
  • 查課程發現Xcode的下載在之後的章節，所以就先跳過去好了？

往下滾到下載SDK

  • 可以用 VS Code 或下載
  • 課程示範是下載，先照做看看

下載完直接點兩下解壓縮

解壓縮完的資料夾（名稱叫flutter）放到合理的地方

  • Macintosh HD>Users > YourUsderName > (自己新建一個資料夾）developer (Angela課程）或是 development (官方文件建議名稱）> flutter (解完壓縮的）
  • 可以在底部的路徑點兩下到該folder
  • 或是按command+ shift

Spotlight (command + 空白） > terminal

  • 接下來老師直接要輸入指令:
vim ~/.zshrc

  • 但我不太懂這要幹嘛，所以回去看官方文件，應該是準備執行這部份：

把 Flutter 加入環境變數

懶得自己打字，乾脆丟到GPT:

這段是在教你如何 在 macOS 上將 Flutter 加入 PATH 環境變數，讓你可以在終端機 (Terminal) 直接執行 flutter 命令。

簡單解釋
  1. 什麼是 PATH？
    • PATH 是系統用來尋找可執行程式的環境變數。如果 flutter 沒有加入 PATH，你每次執行 Flutter 命令都需要輸入完整路徑，例如： ~/development/flutter/bin/flutter doctor 而不是簡單地輸入： flutter doctor
  2. 為什麼要修改 ~/.zshenv？
    • macOS 預設的 shell 是 zsh，它會讀取 ~/.zshenv 這個檔案來設定環境變數，例如 PATH。
    • 我們要在 ~/.zshenv 中新增 Flutter 的路徑，讓 macOS 知道 flutter 指令在哪裡。

如何設定 Flutter 的 PATH？

按照下面的步驟來做：

步驟 1：打開 Terminal

打開 macOS 的 終端機 (Terminal)。

步驟 2：打開或建立 ~/.zshenv

在終端機輸入：

nano ~/.zshenv

這會打開 nano 編輯器來編輯 ~/.zshenv 檔案。

📌 如果 nano ~/.zshenv 開啟後是空的，代表這個檔案還不存在，你可以直接新增內容。

步驟 3：新增 Flutter 的路徑

在 nano 編輯器裡，按 方向鍵 移動到最後一行，然後新增：

export PATH=$HOME/development/flutter/bin:$PATH

這行的意思是：

  • export PATH=... → 把 Flutter 加入 PATH
  • $HOME/development/flutter/bin → 這是 Flutter 的安裝目錄（你需要確認這個目錄是否正確）
  • :$PATH → 保持原本的 PATH 設定

如果你的 Flutter 不是安裝在 ~/development/flutter，你需要換成實際的路徑。例如，如果你把 Flutter 解壓縮到 ~/Documents/flutter，就改成：

export PATH=$HOME/Documents/flutter/bin:$PATH
步驟 4：儲存並關閉

在 nano 編輯器中：

  1. 按 Ctrl + X (退出編輯模式)
  2. 按 Y (確認儲存)
  3. 按 Enter (確定檔案名稱)
步驟 5：讓設定生效

回到終端機，執行：

source ~/.zshenv

這樣就不需要重開機或重新開啟終端機，PATH 會立即更新。

步驟 6：確認是否成功

輸入：

echo $PATH

檢查輸出的內容，看看 flutter/bin 是否已經出現在 PATH 裡。

以下GPT步驟有問題，先跳過

然後輸入：

flutter doctor

如果 flutter doctor 正常執行，表示 Flutter 已成功加入 PATH！

常見問題
  1. flutter: command not found
    • 確保 flutter 真的安裝在 ~/development/flutter，或用 Finder 手動找出 Flutter 的 bin 目錄，再修改 ~/.zshenv 的路徑。
  2. 每次開啟終端機都要 source ~/.zshenv
    • 可能是 ~/.zshenv 沒有被 zsh 自動載入，可以試試： echo 'export PATH=$HOME/development/flutter/bin:$PATH' >> ~/.zshrc source ~/.zshrc
  3. Flutter 版本過舊
    • 可以執行： flutter upgrade
    • 確保你使用的是最新版本的 Flutter。

這樣應該比較清楚了！如果還有問題可以問我 😃

GPT 後面是錯的！！！！現在用 flutter doctor一定很多不合格！

回去看課程教的：

  • 老師儲存完路徑之後，有關掉terminal，再重新開啟
    • 最上方列
    • Sell > New Window > New Window with Profile
  • 但我按照剛剛 GPT 建議步驟，他說不用重啟，所以我姑且繼續
flutter --version

如果有看到 flutter 版本 channel stable，就代表完成這步了！

  • 課程 8:45 後續有提供一些安裝失敗的指南

17. Mac Setup Step 2 – Install Android Studio

  • 看到這步，我核對官方文件，發現完全沒有關於Android設定
  • 想到應該是因為一開始選了Recommand的 iOS!
  • 但是選擇用flutter開發主要就是為了跨平台！
  • 還是跟著Angela老師的流程來繼續設定
    • 老師也有說之後會再解釋為什麼是這樣的操作順序
  • 但一方面也去找官方文件開發for Android的頁面
  • 老師的步驟也是從官方文件點進去下載 Android Studio的連結

官方文件 > 點進連結下載最新的Android Studio

按照說明執行

點進去發現介面有自動翻譯為中文，而且寫超清楚，還有影片…

  • 影片沒有更新
  • 但只有下方 liscenses 要注意一下 (接下來會敘述）

下載成功後

  • 點兩下下載好的檔案
  • 移動到Application

這兩個 licenses 都要去點選 > 按 Accept

GPT:

是的，從你的截圖來看，有兩種 License 需要接受才能完成安裝：

  1. android-sdk-license
    • 包括 Android Emulator、SDK Build-Tools、Platform 等核心開發工具。
  2. android-sdk-arm-dbt-license
    • 包含 Google Play ARM 64 v8a System Image，主要用於模擬器運行 ARM 架構的 Android 系統。
你需要做的步驟：
  1. 確認兩個 License 都選擇 “Accept” (接受)：
    • 先點擊 android-sdk-license，選擇 “Accept”。
    • 再點擊 android-sdk-arm-dbt-license，選擇 “Accept”。
  2. 點擊 “Finish” (完成) 按鈕。

這樣，你就能順利完成 Android Studio 的 SDK 安裝。

Doc

https://dart.dev/docs

https://docs.flutter.dev

Elly
Elly
文章: 26

相關文章