使用 VS Code 開發 Flutter App — 建立專案，打開專案和啟動模擬器執行 App
開發 Flutter App 時，我們有許多 IDE 可選擇，其中 VS Code 是滿多人偏愛的 IDE，以下彼得潘將示範使用 VS Code 開發 Flutter App 的相關操作。
- 建立 Flutter 專案。
- 從 VS Code 打開專案。
- 啟動模擬器
- 執行 App。
- hot reload。
建立 Flutter 專案
- 方法 1: 從 terminal 輸入指令。
打開 Terminal，輸入指令 flutter create + 專案名稱建立專案。
flutter create first_app結果如下，成功產生專案的資料夾 first_app，資料夾下包含開發 App 會用到的相關檔案。
Signing iOS app for device deployment using developer identity: "Apple
Development: Shi Ying Pan (Z4R6WULAXB)"
Creating project first_app...
Resolving dependencies in first_app...
Got dependencies in first_app.
Wrote 129 files.
All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev
In order to run your application, type:
$ cd first_app
$ flutter run
Your application code is in first_app/lib/main.dart.ps: 專案名稱的英文只能小寫，請用 _ 分隔單字，不能有空白或特殊字元，而且不能用數字開頭。
- 方法 2: 從 VS Code 的 Command Palette。
打開 Command Palette(cmd+shift+p)，輸入 flu，選擇 Flutter: New Project。
選擇 Application。
選擇專案存放的地方。彼得潘選擇 Desktop 後再點選 Select a folder to create the project in。
輸入專案名字後按 enter。
打開專案
利用剛剛的方法 2 從 VS Code 建立專案後將自動打開。如果當初是從 terminal 建立專案，啟動專案有以下方法。
- 利用 code 指令啟動 VS Code 開啟專案。
- 啟動 VS Code，點選下圖的 Open 或是 menu 的 File > Open Folder，然後選擇剛剛建立的專案資料夾 first_app。
第一次打開專案時請點選 Yes, I trust the authors。
專案成功開啟的畫面。
啟動模擬器
我們必須先啟動模擬器，之後才能將 App 裝到模擬器上測試 。請點選下圖紅色框框的裝置按鈕。
或從 Command Palette(cmd+shift+p) 選單點選 Flutter: Launch Emulator。
啟動某個模擬器，在此彼得潘選擇 Start iOS Simulator。
啟動成功後出現 iOS Simulator。
VS Code 右下的裝置名稱也變成了 ios simulator。
ps: 如果找不到 Start iOS Simulator 的選項，可能是 Xcode 的安裝有問題。請在 terminal 輸入 flutter doctor 檢查。若出現以下錯誤可照著提示輸入 sudo xcode-select — switch /Applications/Xcode.app/Contents/Developer 和 sudo xcodebuild -runFirstLaunch。
[!] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
Download at: https://developer.apple.com/xcode/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch啟動 iOS 模擬器後，如果想選擇其它機型的 iPhone，可從 Simulator 的 menu 點選 File > Open Simulator。
習慣 Android 的朋友也可以選擇 Android 模擬器，比方 Start Pixel_3a_xxx。Android 模擬器通常會有 cold boot 和無 cold boot 的選項，建議選擇無 cold boot，啟動速度會比較快。
如果找不到 Android 模擬器的選項，請參考以下連結新增 Android 模擬器。
ps: 從 Terminal 也可以啟動模擬器，先輸入 flutter emulators 顯示模擬器清單。
然後再用 flutter emulators — launch 加模擬器名字啟動它，比方以下例子將啟動 iOS 模擬器。
flutter emulators --launch apple_ios_simulator啟動 App
- 方法 1: 點選三角形的啟動按鈕。
切換到 main.dart，然後點選右上方三角形的啟動按鈕。
ps: 三角形旁的下拉箭頭可選擇 Start Debugging 或 Run Without Debugging。
- 方法 2: 點選 Start Without Debugging / Run Without Debugging。
從 Command Palette 或 menu 點選。
- 方法 3: 點選 function main() 上方的 Run。
切換到 main.dart，然後點選 function main() 上方的 Run。
- 方法 4: 切換到側邊欄的 Run and Debug 分頁，點選 Run and Debug。
- 方法 5: 在 Terminal 輸入以下指令。
flutter run
啟動後 Console 出現以下訊息。
模擬器上出現了彼得潘開發的第一個 Flutter iOS App。
點選右下的 + 可增加數字，每按一次加 1，彼得潘開心地一直按呀按，加到了 10。
Flutter 的強項是跨平台，以下我們也看看一些其它裝置執行的畫面。
Android emulator。
Chrome(web-javascript)。
macOS。
hot reload
開發 Flutter App 時，我們可利用 hot reload 功能加快開發速度。當我們修改程式時，hot reload 會直接更新 App，因此我們不用再花時間重新啟動 App。
以下圖為例，我們將 main.dart 裡的 You have pushed the button this many times: 改成 I love you。
存檔(快速鍵 cmd + s)後 App 的畫面馬上神奇地更新成 I love you。等下彼得潘要努力地按到 3000，跟電影鋼鐵人的 I love you 3000 看齊。
如果 App 畫面沒有自動更新，我們也可以自己點選下圖的閃電按鈕觸發 hot reload。
如果想偷懶，覺得按 cmd s 觸發 hot reload 有點辛苦，我們可透過以下步驟實現修改程式後自動 hot reload。
若從 Terminal 啟動 App，則可輸入 r 觸發 hot reload。以下為詳細的指令清單.。
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
