[Flutter Note] - 前端拓展技能樹之 Flutter 安裝篇[macOS]

Introduction & 前言

如果你想要開發一款 APP ，又不想要被侷限該選擇學 IOS 的語言(Objective-C / Swift) 還是 **Android 的語言(JAVA / Kotlin)**，你可以跟著筆者一起學習 APP 的前端之路 Flutter。

Flutter 是由 Google 開發和支援的開放原始碼架構，強大的地方在於可以透過一種語言開發，支援多至六個平台的應用，你可以將開發好的產品推出到 iOS、Android、Web、Windows、MacOS 和 Linux，如果你也和筆者一樣完全零經驗，但是非常有興趣，就跟著一起往下讀吧，這篇文章將會告訴你怎麼在 macOS 上開發 Flutter。

這是一篇在 macOS 上安裝 Flutter 的教學文章，同時也是筆者的紀錄文章，如果有誤，還請盡情的在下方留言指出，感謝。

由於筆者參考了一些安裝教學，發現 Flutter 其實更新過幾次後，畫面和教學都有點落差，但總體來說需要操作的流程都是差不多的，如果你正在參考此篇安裝教學，可以先觀看一下官網 flutter.dev 裡的安裝教學畫面是否相同，本次安裝會選擇安裝教學內的 macOS > ios 作為教學。

注意：不論如何，最終都請依照官方網站的為主，官方網站的文件一定是最新且最正確的方式

---

Summary & 摘要

這篇文章不會過多的介紹 Flutter ，主要還是會專注於怎麼安裝，接下來的其他文章才會開始慢慢進入到 Flutter 應用之中。

本篇文章預設學習前的基本條件需求：

• 需要會基本英文
• 需要會使用終端機基本操作

Flutter 最低配置需求(截至 2024/01/28 的 macOS 安裝官方文件，最新可參考官方安裝指南的硬體需求)：

要求	最低要求	推薦配置
CPU Cores	4	8
Memory in GB	8	16
Display resolution in pixels	WXGA (1366 x 768)	FHD (1920 x 1080)
Free disk space in GB	36.0	56.0

本篇文章將有以下幾個安裝步驟，最終我們將可以在 macOS 上開發 Flutter：

1. 安裝 Rosetta2 (非 Apple 晶片電腦可跳過)
2. 安裝 Xcode
3. 安裝 CocoaPods
4. 安裝 Flutter SDK
5. 安裝 Android Studio
6. 配置 Android Studio 設置
7. 配置 Xcode 設置
8. 配置 IDE(編輯器) 的開發設置

備註：看起來雖然過程有點多，但其實最主要的還是需要讓你的環境可以透過 IDE 去操作 Flutter SDK，並且能即時(hot-reload)在開發環境看到模擬器裡呈現的樣子，別擔心

---

開啟安裝文件

首先我們需要進入到官方網站的 Get started > Install Flutter，點擊 macOS

接著在點擊 IOS ，這邊選擇哪一個其實都差不多，很多教學文章在官網之前舊的版本是沒有這頁的，我們先依照官網建議的(If you don’t have a preference, choose mobile.)，選擇 IOS。

接下來就能看見安裝建議的表格，官網可能後續還會更新文件，故還是以官方網站的為主。

---

1. 安裝 Rosetta2 (Apple 晶片電腦) - Intel 晶片可跳過

如何查看自己的 Apple 晶片還是 Intel 晶片呢？

點選 左上角的  > 關於這台 Mac

如果晶片有關鍵字 Apple 的話，那就代表你的電腦是使用 Apple 晶片，請繼續安裝步驟

如果不知道要從哪邊點出詳細介面，也可以進入到 Apple 的官方網站幫助頁面查看資訊 - 配備 Apple 晶片的 Mac 電腦

如果是 Apple 晶片請打開終端機輸入指令(注意，以下開始在終端機輸入都不需要輸入包含錢字符號的部分)：

$ sudo softwareupdate --install-rosetta --agree-to-license

---

2. 安裝 Xcode

由於我們系統已經是 macOS ，對於 IOS APP 開發前不需要配置太多，但是有個主要角色一定要安裝，也就是 Xcode。

找到電腦的 App Store 並打開它 > 搜尋欄輸入 Xcode > 安裝 Xcode

這邊我們順便配置一下 Xcode，依序輸入以下指令

$ sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
$ xcodebuild -downloadPlatform iOS
$ sudo xcodebuild -license

在執行 xcodebuild -downloadPlatform iOS 的時候會需要簽署一些 License 同意書，基本上全數同意即可，不會有什麼問題

這樣就配置完成了，詳細還是可以參考官方網站的 Configure iOS development 流程，或許更新後會改變配置方式。

---

3. 安裝 CocoaPods

這是透過 Ruby 語言所開發出來的管理工具，用來管理 IOS 開發時(Objective-C / Swift)所使用的套件。

由於會依到 Ruby，所以必須要先看一下主機是否有 Ruby 的配置，相關可以參考 CocoaPods 學習筆記。

安裝套件一律都以該套件的官方網站介紹為主，故這邊可以先到 CocoaPods 的官方安裝教學指南 查看流程

這邊我們在終端機輸入以下指令：

$ sudo gem install cocoapods

安裝過程會需要花一小段時間，可以耐心等待一下。

安裝成功後再輸入 gem -v，如果有看到版號，就是安裝成功了。

如果無法使用 gem 指令，請記得確認一下 shell 是否有把 gem 捷徑加入了。

如何查看自己使用的 shell 可以輸入 echo $0

• 使用 zsh 請輸入 vim ~/.zshrc

• 使用 bash 請輸入 vim ~/.bash_profile

• 最終在檔案內加入 export PATH=$HOME/.gem/bin:$PATH

如果無法儲存檔案，請記得在 vim 前面加上 sudo

詳細也可以參考官方網站的安裝教學 Install CocoaPods

---

4. 安裝 Flutter SDK

Flutter SDK 可以讓我們透過 flutter 指令去創建專案或者執行一些 flutter 功能。

安裝方式有兩種，一個是透過 VSCode install ，另一個則是 Download and install ，這邊我們選擇後者。

在安裝文件的 Install the Flutter SDK 內選擇 Download and install

點擊你電腦晶片的安裝檔案，如果忘記晶片怎麼查看，可以看上面 安裝 Rosetta2 (Apple 晶片電腦) - Intel 晶片可跳過 步驟，裡面有介紹到。

筆者電腦室 Apple 晶片，故選擇右邊那個，點擊下載之後，打開終端機輸入：

$ cd ~/
$ mkdir development

或者點擊 Finder > 右鍵創建資料夾 > 名稱輸入 development

將剛剛下載的檔案解壓縮，把解壓縮出來的資料夾整份搬移到剛創建的資料夾 development

再次輸入以下指令，之後我們就可以在終端機上面直接使用 flutter 的指令了：

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

如果沒有找到指令，請查看您使用的 Shell 文件內是否有配置 export PATH=$HOME/development/flutter/bin:$PATH ，如果沒有請加上。

接著在終端機上輸入 flutter doctor ，這個指令可以幫助你查看有哪些東西是否還沒有配置好。

之後安裝流程都可以透過這個指令去查看是否還有什麼沒有安裝成功的，如果有遺漏的 Flutter 也都會提示需要執行什麼指令。

---

5. 安裝 Android Studio

首先進入 Android Studio 的 Developers 頁面，點擊 下載 Android Studio Hedgehog

接著打開下載的安裝檔，執行安裝

安裝成功後，打開 Android Studio

第一次打開會問你要不要使用自己的客製化配置，直接使用預設的選擇 Do not import settings 就可以了

接著會跳出提示詢問你是否要提供資訊給軟體進行優化與改進，依照自己的喜好選擇即可

然後這邊繼續點擊下一步

這邊筆者選擇 Standard ，如果想要自行配置也可以選擇 Custom

接著會跳出請你同意 License Agreement 安裝的選擇，我們需要把所有項目都勾選接受(Accept)

在點擊 Next ，安裝過程需要等待一下

---

6. 配置 Android Studio 設置

安裝 Android Studio 主要是讓我們可以去使用 Android 模擬器，在開發環境中可以打開 Android 系統的手機去看我們開發的情況

另外我們開發也可以透過 Android Studio 去執行，如果你已經有習慣使用的 IDE，例如 VSCode ，下面我們也會講到怎麼去配置

Android SDK

先打開剛剛安裝好的 Android Studio

點選左上角的 Android Studio > Settings

點選左邊的 Android SDK > 選擇右邊的 SDK Tools 頁籤 > 勾選 Android SDK Command-line Tools (latest) ，如果已經有安裝了，就無需再勾選，如果沒有勾選請勾選起來後，點擊右下角的 Apply 及 Ok

安裝前會再詢問一次，一樣點擊 OK 即可

安裝過程需要在稍等一陣子

Flutter Plugins

如果需要在 Android 上開發需要安裝 Flutter Plugins ，但筆者還是建議不管有沒有要使用 Android Studio 都裝一下

一樣像剛剛的步驟打開設定視窗，點選左上角的 Android Studio > Settings

點擊 Plugins > 搜尋輸入 Flutter ，點擊 Install 安裝它

一樣點選 Accept ，同時安裝 Flutter 的套件時，會自動連同 Dark 一起安裝

之後重新開啟專案就能看到有一顆按鈕 New Flutter Project ，點擊他創建新專案

點擊後會跳出一個視窗，預設左邊會選擇 Flutter ，右邊則會去自動匹配之前我們下載過的 Flutter SDK

如果 SDK 沒有匹配到，可以自己點擊旁邊的點點點，自己去找到下載下來的 flutter 資料夾

確認有找到 SDK 之後點擊下一步

這邊可以更改預設的名稱，基本上除了 Project Name 其餘剛開始都不需要更改，後續就看你的專案配置在改就行，現在的目的只是要先叫出畫面讓我們可以去安裝模擬器。

Flutter 的 Project Name 是有限制的，只能接受 底線加小寫 的規則，如果不符合規則就會跳出上面那個彈窗

如果本機已經有相圖名撐的專案會詢問你是否要覆蓋，需要特別注意

• • firstFlutterProject
• • FIRSTFLUTTERPROJECT
• [O] - first_flutter_project

至此你就擁有第一個自己的 Flutter 專案了

模擬器

打開專案畫面後，上面 Bar 調會多了幾個可以選擇的選項

這邊我們需要配置一台 Android 的模擬器，點擊 Tools > Device Manager

如果之前沒有安裝過模擬器，這邊應該會是空的，別擔心，讓我們點選那個 + 符號

選擇你喜好的裝置，點選 Next

到這個畫面應該會是全空的，點選第一個 UpsideDownCakePrivacySandbox 安裝沙盒環境，安裝好之後點選 Next

這邊點擊 Finish 即可完成

之後就能看到你剛剛選擇要安裝的模擬器了

點擊你想要使用的模擬器播放鍵

第一次執行過程會比較久一點，需要花一點時間等待一下

---

執行 flutter Doctor

在進入下一步之前我們先緩口氣，其實在安裝的過程中，你都可以在任何一個時間點去輸入 flutter docker

透過這個指令 Flutter 會去檢測還有什麼配置是還沒完成安裝的

像上面這樣就是環境還沒有配置完全，每個人會有些許不同，這邊我們就可以依照缺少的再去配置，像是上面提到的 flutter config --android-sdk 我們就可以直接執行

如果你一直出現 command not found: flutter ，則需要去確認一下 shell 有沒有配置成功。

---

7. 配置 Xcode 設置

我們還缺少 Xcode 的配置，依照官方網站指南 Configure your iOS simulator 的流程執行

在終端機輸入：

$ open -a Simulator

第一次打開會需要你創建一個新的模擬器，這邊一樣選擇自己喜歡的即可，名稱隨意輸入

模擬器後續都還是可以在安裝沒關係，就像 Android 模擬器一樣

出現模擬器就算成功了

點選 File > Open Simulator 都還可以切換其他模擬器

---

再次確認

這時候可以在執行一次 flutter doctor 確認有什麼沒有裝到

筆者這邊依稀記得還有執行過 flutter doctor --android-licenses，但是忘了在哪個環節去執行，其實除了 Flutter SDK 建議先安裝外，其它安裝順序不是非常重要，如果你有漏掉執行 flutter doctor 就會提醒了

另外筆者的 gem 其實也是一直安裝失敗，後來也是一直重複刪除安裝刪除安裝就成功了，如果有碰到請一直按著 flutter doctor 的指示去做就可以了

小抱怨：其實我覺得安裝流程對新手及其不友善，但或許是我慧根太低的原因

中途也有執行到 sudo gem install drb -v 2.0.6，總之跟著 flutter doctor 的步驟走應該是不會相差太遠的，少的東西再另外去爬文安裝即可

---

8. 配置 IDE(編輯器) 的開發設置

VSCode

因為筆者習慣使用 VSCode ，故在 VSCode 也會需要安裝 Flutter SDK

在 VSCode 安裝套件的地方輸入 Flutter 點擊安裝

因為我們需要執行模擬器，故這邊也需要再安裝 Emulator ，在搜尋欄輸入 Android IOS Emulator 點擊安裝

都裝好後建議重新啟動一次 VSCode

在 VSCode 按 command + p，彈出的輸入框中輸入 >flutter，就會有新建專案的指令

選擇你想要使用的配置去建立新的專案

建立完成後，先確認 flutter doctor 執行都是配置正常的，正常的話再進入下一步

一樣在 VSCode 按 command + p，打開輸入框，輸入 >Emulator，然後按 Enter

這時候就能選擇要啟動 IOS 或者 Android 的模擬器

之後可以在選擇想要啟動的型號

再次提醒：如果還是有出現沒有找到 flutter 指令的話，就要再查看一下配置是否沒有吃到

Android Studio

Android Studio 的配置已經配得差不多了，打開剛剛創建的專案

一樣叫出模擬器列表，點擊 Tools > Device Manager ，點選想要使用的模擬器播放按鍵

點選上面的綠色播放按鈕

出現 Debug service Listening on ws://127.0.0.1:57309/zjRoB7eM050=/ws 就代表成功執行了

到這邊恭喜你啟動了你的第一個 Flutter 專案！

Android Studio 切換模擬器

Android Studio 方便的地方在於切換模擬器比較一目瞭然，而且模擬器打開就在同一個視窗內。

不確定 VSCode 是否有可以有相同的配置，如果可以還歡迎在下面留言，感謝。

---

享受成果

現在你可以更改 lib > main.dart 裡的 home: const MyHomePage(title: 'Flutter Demo Home Page'),，將 title 改為 Hello World

將會看到 Hot-reload 熱更新的效果，更改後立即見效。

---

Conclusion & 結論

距離上次文章已經有一段時間了，有段時間試著逼迫自己一個月需要產出一篇文章，但後來發現效率會很低，而且會為了寫文章而寫

這次因為碰到要與朋友一起做 Side Project ，聊到 APP 的框架，一直對於寫 APP 有很大的興趣

之前常常聽到 React Native ，雖然 RN 社群非常成熟，但筆者其實一直想要尋找前端還有什麼路可以去探索

Flutter 是一個很好的拓展點，加上筆者一直深信雞蛋不能放同一個籃子內，雖然 JavaScript、React.js 都是目前無法撼動的地位

但如果能學一點其他的語言還是比較保險的

一直聽說 Flutter 很威能，可以寫出各種平台產品，所以這次也是我們 Side Project 優先考量的選擇。

接下來會開始研究學習 Flutter ，並且有什麼有趣或者學習筆記，筆者也會記錄到部落格上，歡迎有興趣的夥伴一起來交流成長！！

---

參考網站

• Flutter.dev 官方網站
• CocoaPods 學習筆記