[Flutter] 在 Mac 上安裝 Flutter 開發環境

[Flutter] 在 Mac 上安裝 Flutter 開發環境

之前寫 圖書館多重帳戶登入 app,是使用 Cordova 寫的。

一直想要改學 React Native,不過總覺得學習曲線有點高…

(↑ 其實是老了)

 

Flutter 出來之後,又變成猶豫要學 React Native 還是 Flutter…

覺得學 React Native 的話,就可以用還算粗淺了解的 JavaScript,

不用再去學 Flutter 用的 Dart 語言。

但還是覺得 React Native 的學習曲線有點高…

(↑ 其實就是老了,到底要講幾次)

 

結果最近圖書館借的 Flutter 的書到了,

所以就開始來安裝 Flutter 的環境吧~

(↑ 前面的糾結到底是在… ?)

 

1. 安裝 Flutter

在 Mac 上安裝 Flutter,官方文件是去下載一個安裝包自己解壓縮。

不過用 Homebrew 搜尋了一下,發現有 flutter 這個套件,

而且觀察了一下,它也是去官方網站下載安裝包解壓縮,

那就直接用 Homebrew 裝吧:

brew install flutter

 

裝好之後,執行  flutter doctor 看看環境有沒有問題…

像下面指出我的 Android cmdline-tools 沒有安裝、以及 license 狀態不明:

$ flutter doctor

Running "flutter pub get" in flutter_tools...                       8.1s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.5, on macOS 12.2.1 21D62 darwin-x64, locale en-TW)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.66.2)
[✓] Connected device (2 available)
    ! Error: EPH’s iPhone is busy: Preparing EPH’s iPhone for development. Xcode will continue when EPH’s iPhone is finished. (code -10)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

 

打開 Android Studio > More Actions > SDK Manager,

切到 SDK Tools 分頁,Android SDK Command-line Tools 還真的沒有安裝,

我之前好像只有用到 Android SDK Platform-Tools…

記得把 SDK Command-line Tools 裝好,其他有在用的也順便安裝更新一下:

 

至於 Android license 的問題,就照著上面給的指示,

執行  flutter doctor --android-licenses 指令,

接下來一路按 y 確認就行了:

$ flutter doctor --android-licenses

3 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y

1/3: License android-googletv-license:
......
Accept? (y/N): y
All SDK package licenses accepted

 

現在執行 flutter doctor 就沒有問題囉~

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.5, on macOS 12.2.1 21D62 darwin-x64, locale en-TW)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc3)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.66.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

 

2. 建立 Flutter 測試專案

執行下面的指令來建立一個新的 Flutter 專案:

flutter create my_app

 

3. 執行 Flutter 測試專案

剛建好的專案裡會有預設的 Hello World 程式,可以立刻執行:

cd my_app
flutter run

 

在 Chrome 中執行

假設沒有接任何手機、也沒有開啟 Android/iOS 模擬器時,

它預設會跑在 Chrome 瀏覽器上面:

$ flutter run

Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             23.4s
This app is linked to the debug service: ws://127.0.0.1:57890/dfiGv9e8NoI=/ws
Debug service listening on ws://127.0.0.1:57890/dfiGv9e8NoI=/ws

💪 Running with sound null safety 💪

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:57890/dfiGv9e8NoI=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:57890/dfiGv9e8NoI=

Application finished.

 

基本上就是一個很簡單的 Flutter 程式,

按下 + 號的話,數字就會加 1:

 

在 iOS 模擬器中執行

執行下面的指令,把 iOS 模擬器叫起來:

open -a Simulator

 

這時再執行  flutter run 時,會出現選單,

讓你選擇是要用 Chrome、實體 iPhone、還是 iOS 模擬器執行,

下面是跑在 iOS 模擬器上的畫面:

 

在 Android 模擬器中執行

到 Android Studio > More Actions > Virtual Device Manager,

選擇一個模擬器跑起來,再執行  flutter run 並選擇 Android 模擬器,

可以看到跑起來畫面和 iOS 是差不多的:

 

這樣子,就可以確認 Flutter 在 Android/iOS 的開發環境上沒有問題,

可以開始學習 Flutter 囉~

 

(本頁面已被瀏覽過 146 次)

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料