Flutter 學習 - 環境安裝與錯誤處理 - Flutter - Tech

在開始 flutter 的專案之前，首要步驟就是先將環境架好。
由於 flutter 需要跨平台開發，因此我們不僅需要安裝 android sdk, 也需要安裝 ios 相關的 xcode。
這篇主要記錄我在架設 flutter 環境時碰到的錯誤與處理方式。

# 建構 flutter 開發環境

先列一下我裝置的規格

	- MacOS Ventura 13.1 Apple M1 chip.
	- Memory 16GB

# 安裝 flutter

首先，先到 flutter 官網依照 flutter 安裝教學進行安裝。
由於我這邊是 macOS 因此 flutter 安裝的部分會依照 macOS 的部分進行安裝。

# 獲得 sdk

下載 flutter sdk 並且解壓縮到自己喜歡的目錄。
我在 ~/Document 中建立了一個 Project 目錄專門放置專案相關的資源。
因此 flutter 會放置在 ~/Document/Project 中。

	cd ~/Document/Project
	unzip ~/Downloads/flutter_macos_3.7.0-stable.zip flutter

加入 env.

export PATH="$PATH:`pwd`/flutter/bin"

# 執行 flutter doctor

flutter doctor 會診斷是否缺少開發 flutter 時所需要的相關套件。

flutter doctor

第一次跑的時候我還未裝 andriod sdk 與 xcode 。因此得到的結果會是類似以下這樣。

接下來，我們就要一步一步地把錯誤的部分給修正。

# 安裝 Android sdk.

首先到 android studio 官網安裝 android studio。
下載並安裝完成後，開啟 android studio，並且點選 settings > Appearance & behavior > System Settings > Andriod SDK 並且選擇到 sdk tools，將裡面的 sdk 都安裝起來。

安裝完後在 env 中增加 path

export PATH="$PATH:$HOME/Library/Android/sdk"

再重跑一次 flutter doctor

這次 error message 變了，有些 licensee 不正確。因此我們照著執行 flutter doctor --android-licenses

接下來它會問你一些 licenses 是否同意。就照著選 Y 就好。

結束後，再跑一次 flutter doctor 理論上 android 這邊的 error 就都清除了。

# 安裝 xcode.

直接上 app store 安裝 xcode.

安裝完成後執行

	sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
	sudo xcodebuild -runFirstLaunch

再執行 flutter doctor 也許會碰到跟我一樣的狀況。敘述缺少 cocoaPods 。

因此我們要再安裝 cocoaPods 。

sudo gem install cocoapods

之後再跑一遍，理論上 xcode 的部分就也修掉了。

最後就剩下 Java 的 bundled 要處理。

# 安裝 Java bundle.

我首先找尋 stackoverflow 上的解決方法，查到這篇 Unable to find bundled Java version with flutter doctor, after updating Android studio Arctic Fox(2020.3.1) on M1 Apple Silicon

底下的留言串有點長，我這邊將內容整理成一套處理的方法。

設置 Java_Home 環境變數
參考這篇文章 # How to Set $JAVA_HOME environment variable on macOS

export JAVA_HOME=$(/usr/libexec/java_home)

接下來依照以下指令一步一步 alias

	cd /Applications/Android\ Studio.app/Contents/jre

	# 如果發現 Contents 內沒有 jre 請執行這個步驟
	cd /Applications/Android\ Studio.app/Contents
	ln -s jbr jre
	cd jre

	# 建立 jre 的 symbolic link
	ln -s ../jre jdk

	# 建立 JavaAppletPlugin.plugin 的 symbolic link
	ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

Hint: 這邊可能會碰到 /Library/Internet Plug-Ins 沒有 JavaAppletPlugin 的情況
這時我們需要另外修正這部分

follow 以下步驟

到 Java 官網下載 java installation

依照官網指示安裝.

完成之後再一次確認 ls /Library/Internet Plug-Ins/ 是否有 JavaAppletPlugin.plugin 。此時應該就會已經裝好了

以上步驟完成之後我們再執行一次 flutter doctor -v

到這邊，應該就能看到全部錯誤都修正完畢。

如此 fultter 的環境就算準備完成了。

flutter