Back

macOS安裝Flutter開發環境

Flutter可以開發跨平台應用程式,例如Web App、iOS App、Android App、macOS App、Windows App、Linux App,不需要一個平台一個語言,對於開發者雷說輕鬆許多。

下載Flutter SDK

前往此頁面下載對應自己電腦的SDK,以M1 Max MacBook Pro為例。

https://docs.flutter.dev/development/tools/sdk/releases?tab=macos

下載完後進行解壓縮

解壓縮後得到flutter文件夾,將此文件夾搬到自己的user目錄

將 flutter/bin 加入 PATH

開啟電腦終端機,輸入以下命令,並輸入密碼。

				
					sudo vim .bash_profile
				
			

輸入 i 並按下enter進入編輯器

在最下面一行加上:

下方([PATH_TO_FLUTTER_GIT_DIRECTORY] 就是剛剛flutter的路徑)

完成後按一下esc健,輸入 :wq! 即可保存退出

				
					
export PATH=$PATH:[Flutter 路徑]/flutter/bin

				
			
				
					source ~/.bash_profile
				
			

安裝 Xcode

打開App Store下載Xocde

安裝完後開啟終端機輸入以下命令

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

sudo xcodebuild -runFirstLaunch
				
			

繼續在裝端機輸入

會跑出一大篇條文的東西,直接按下 並輸入 agree 來同意條文內容。

				
					sudo xcodebuild -license
				
			

安裝Android Studio

到以下連結下載安裝檔進行安裝

https://developer.android.com/studio

在 VScode安裝 Flutter 所需套件

在 Extension 的面板中,搜尋 Flutter 後進行下載

接著按下鍵盤 cmd+shift+p 來開始 VS Code 的 Command Palette。然後輸入 doctor,接著選擇 Run Flutter Doctor。通過 Flutter Doctor 可以知道還缺乏哪些 Flutter App 開發的必要元素。

問題1:
				
					[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.
				
			

在終端機中輸入以下命令來同意相關規定

				
					flutter doctor --android-licenses
				
			

問題2:

				
					[!] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.4, Build version 12D4e
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
				
			

在終端機輸入

				
					sudo gem install cocoapods
				
			

完成!

建立一個App

透過 Command Palette 輸入 Flutter New,然後選擇 Flutter: New Application Project,並選擇 Project 資料夾的所在地,就完成了。

Ricky Chen
Ricky Chen

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *