建立 flutter 開發環境

由於最近手邊的案子需要雙平台，評估了一下 flutter，就來試一下，順便學一個新技能。

以下內容均以 Mac 操作為主。

Setp 1. 下載 flutter SDK

下載 flutter SDK

點擊「flutter_macos_1.17.3-stable.zip」並儲存，我的習慣會在根目錄建立一個名為「Dev」的資料夾

Setp 2. 設定 flutter SDK

先把 SDK 解壓縮

打開終端機，開始設定 flutter SDK path

輸入以下指令

1

code . ~/.bash_profile

接著將 flutter SDK 路徑填入 .bash_profile 檔案中，讓你可以全域使用 flutter 指令

1

export PATH="$PATH:/Users/{you name}/Dev/flutter/bin"

儲存後，輸入下列指令，進行套用

1

source ~/.bash_profile

接著輸入 flutter 進行 Building flutter tool

1

flutter

稍等一下，出現下列畫面，即完成 flutter 的安裝

接著執行 flutter doctor，會幫你檢查你電腦還 「缺少」 什麼東西

1

flutter doctor

Setp 3. 安裝開發工具 - VS Code

flutter 的開發工具主要有兩個，一個是 VS Code，另一個是 Android Studio，VS Code 安裝過程很簡單，就不逐步介紹了，VS Code 還需要下列兩個套件軟體，請自行去 VS Code extension marketplace 下載安裝

• Flutter
• Dart

Setp 4. 安裝開發工具 - Android Studio

Flutter 是由 Google 開發的開源行動應用軟體開發套件，因此也整合至自家的 Android Studio 中，要透過 flutter 開發 Android，還有需要 Android SDK 與 AVD(Android Virtual Devices) 模擬器，因此需要安裝 Android Studio。

請自行安裝與設定，Android Studio 安裝過程網路上有許多教學，就不逐步介紹了，完成開啟後，請選擇右下角的「Configure -> Plugins」，安裝 flutter Plugins，安裝完畢後，初始頁面會增加一個建立 flutter 專案的選項

Setp 5. 安裝開發工具 - Xcode

Flutter 需要開發 iOS，安裝 Xcode 也是必不可少的，請自行去 App Store 進行安裝，安裝完成，開啟並執行「同意」等操作

Setp 6. 再次檢測 flutter doctor

再次執行 flutter doctor

1

flutter doctor

顯示還缺少兩項，就依照說明逐一執行即可

Andorid：執行下列指令，並會需要你選擇 y 同意即可

1

flutter doctor --android-license

iOS：執行下列指令

1
2

sudo gem install cocoapods
pod setup

執行完畢後，再次執行 flutter doctor，若出現下面畫面，表示 flutter 完成安裝

Setp 7. 參考資料

• Flutter install 官方文件