Hsüan's Blog

2021-05-23

安裝 flutter

前言

這邊是假設,開發機使用 MacOS,且安裝好了 Home brew 管理套件,用 vscode 編輯器進行開發。

為啥是 MacOS?

其實並沒有其他選擇,因為要實作 IOS 必須要有 xcode。要安裝 xcode,必須有 MacOS。

Why homebrew?

這不一定要有,下面看到的 brew 指令,都可以手動進行安裝。

Why VSCode?

其實啥編輯器都可以,不過官方有支援 vscode flutter 插件,這屬於懶人做法。

安裝 flutter

brew install flutter

其他配套安裝

VSCode

到 Extensions 裡,搜尋 flutter 並安裝 (id 是 dart-code.flutter)

Web

要有 Chrome

brew install google-chrome

Android

必須先安裝 Android Studio,因為需要模擬器跟一些工具。

brew install android-studio --cask

打開 Android Studio

open /Applications/Android\ Studio.app/

在一開始的畫面右下齒輪 Configure 依序進入到 SDK Manager -> System Settings -> Android SDK -> SDK Tools 選擇安裝 Android SDK Command-line Tools (latest)

安裝好後,要起始一個模擬器

有需要使用 Terminal 執行 adb, emulator 等指令的,記得在 ~/.bash_profile 加上

export ANDROID_SDK_ROOT=~/Library/Android/sdk
export PATH="$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$ANDROID_SDK_ROOT/emulator:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_SDK_ROOT/tools"

簽署 android licenses

flutter doctor --android-licenses

IOS (TODO)

都設定好之後,可以輸入 flutter doctor 檢查一下是不是少了啥。

起始專案

flutter create <專案名稱>

記得名稱只能使用 snack_case (a-z,_),詳見 flutter 命名

啟動

用 VSCode 打開剛創好的專案

用熱鍵 command + shift + p 打開 command palette,輸入 flutter 找到 Flutter: Select Device 選擇想要測試的模擬器。

然後在 Terminal 輸入

cd <專案資料夾>
flutter run

若選擇的是 Android 或 IOS,第一次啟動頗花時間,請耐心等待

© 2019 ~ 2023Hsüan, Powered by Gatsby, Theme Material UI