之前寫 圖書館多重帳戶登入 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

裝好之後，執行  

像下面指出我的 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 的問題，就照著上面給的指示，

執行  

接下來一路按 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

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 瀏覽器上面：

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

$ 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 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 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

這時再執行  

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

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

在 Android 模擬器中執行

到 Android Studio > More Actions > Virtual Device Manager，

選擇一個模擬器跑起來，再執行  

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

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

可以開始學習 Flutter 囉～