yii.
← Writing
Flutter 技術 · · 7 min read

輕鬆完成 Flutter 開發環境，最新版！

這篇寫於 2022 年。工具和 API 變化很快，部分步驟可能已經不適用。

Flutter Development Environment Setup

最近在公司幫新的M1 Mackbook準備Flutter環境，還有幾位前端同事也來學習Flutter，在設置過程中大家都有遇到一些問題，比較多都是因為M1 ARM處理器的關係。

而剛好趁這次機會來整理一下環境教學，只要幾個步驟，照著做很快就能完成了，不用怕無法運行的狀況，也不需要再請求幫忙囉。

XCode#

  • iOS開發編輯器
  • 檔案大，耗時長，需要先進行否則網路慢可能需要等幾個小時..
  • App Store下載

Cocoapods#

  • iOS套件管理器

CocoaPods.orgThe Dependency Manager for iOS & Mac projectscocoapods.org

打開Terminal，透過gem指令安裝

sudo gem install cocoapods

IDE#

  • VSCode
  • Android Studio

根據自己的喜好，選擇IDE開發編輯器。兩款都非常棒，但我個人偏好VScode，後來都使用它來開發，Android Studio記憶體消耗大，有時候會覺得比較卡比較慢，尤其對老電腦很不友善。

Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio…code.visualstudio.com

https://developer.android.com/studio

Home brew#

  • MacOS 套件管理工具

HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh

打開Terminal，透過指令安裝\

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝後通常會看到這條警語

Warning: /opt/homebrew/bin is not in your PATH.

Step.01 需要進行變數的設置，建立並編輯 ~/.zshrc 檔案，將路徑添加到裡面，退出儲存。

export PATH=/opt/homebrew/bin:$PATH

Step.02 執行 source ~/.zshrc ，重新載入，或是重啟Terminal

Git#

版控必需品，請先裝好它。

DownloadsGit comes with built-in GUI tools ( git-gui, gitk), but there are several third-party tools for users looking for a…git-scm.com

打開Terminal，透過指令安裝

brew install git

FVM#

  • Flutter版本管理工具，非常實用

Installation | Flutter Version ManagementThere are a few ways to install FVM, and we are working on other ways to make it even simpler. You can download the…fvm.app

brew tap leoafarias/fvm 
brew install fvm

FVM GUI(Sidekick)#

  • 可視介面的FVM，不喜歡指令的可以下載

https://github.com/fluttertools/sidekick/releases/tag/1.0.0

安裝後，下載所需的Flutter版本

  • 查看目前有的Flutter版本資訊
  • 將路徑複製起來待會設置需要使用，/Users/yii/fvm/versions/stable/bin，每個人的使用者目錄名稱不一樣哦，記得更換

設置Flutter環境變數#

  1. 準備好Flutter執行檔的路徑，也就是 /bin 目錄，我的路徑為 /Users/yii/fvm/versions/stable/bin
  2. 進行變數的設置，建立並編輯 ~/.zshrc 檔案，將路徑添加到裡面，退出儲存
export PATH=/Users/yii/fvm/versions/stable/bin:$PATH

測試Flutter命令，是否可以正常執行

檢查Flutter環境#

查看開發所需要的Flutter、XCode、Android Studio、VSCode等等是否都準備好了，缺少的話會有提示訊息，再跟隨訊息將東西補齊

flutter doctor

第一個，需要允許Android licenses

第二個，補足Xcode所需東西

重複執行 flutter doctor，直到全部通過就好囉，不覺得突然感覺世界很美好嗎！這時候就能試看看運行Flutter囉

可能遇到的問題#

Q1: gems & ffi#

M1電腦在執行Flutter專案時，可能會遇到 gems 問題，包含 ffi 關鍵字。

Step.01 開啟Terminal，透過 gem 指令安裝 ffi，執行以下指令

sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc

Step.02 完成後重新執行專案

(額外補充)安裝Java環境#

如果有需要Java的話在進行安裝，步驟跟前面都差不多。

Getting Started with Java in Visual Studio CodeThis tutorial shows you how to write and run Hello World program in Java with Visual Studio Code. It also covers a few…code.visualstudio.com

  • 取得Java的家目錄，這是我的 /Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home
  • 試看看Java指令是否可以正常運行，不行的話再將它設置到變數，跟前面步驟一樣，編輯 ~/.zshrc 檔案，設置 /bin 目錄
  • 執行路徑，/Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home/bin
  • 記得最後都要執行 source ~/.zshrc，指令才能正常運作，切記！

參考#

其他文章#

關於我#

贊助#

謝謝你花費時間看完，非常感謝！

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

最後#

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～

本文原刊登於 Medium。