接續上一篇30天Flutter手滑系列 - SDK環境設定完成後，我們來加速一下進度，一次把跨平台開發跟IDE設定完成，然後跑第一個範例程式吧。

開發平台設定

iOS環境設定

• 安裝XCode，這邊安裝方式就不贅述。
• 安裝完後，開啟模擬器，確保其正常運作，可以從Hardware > Device選取喜歡的手機尺寸。
• 接下來是創建一個flutter專案

flutter create my_app
cd my_app
flutter run

如果順利沒有任何錯誤產生，就可以在模擬器上看到畫面如下囉。

Android環境設定

Android安裝上略顯麻煩，請照著以下步驟進行安裝及設定。

• 安裝Android Studio

• 安裝完後，打開Android Studio，遵照指示完成Android Studio Setup Wizard。此時會同步安裝Android SDK、Android SDK Platform-Tools和Android SDK Build-Tools。

• 回到Android Studio，找到Android Studio > Tools > Android > AVD Manager。如果是在初始頁可以依照下圖打開
  

• 打開後點選Create Virtual Device，建立新的裝置。官方建議選擇x86或x86_x64。

• 在安裝精靈的最後一頁，記得選取Hardware - GLES 2.0以啟用hardware acceleration。
  

• 完成

幾個特殊情況可能會發生

1. 已安裝Android Studio，但Android toolchain找不到
2. Flutter偵測到多個版本的Android Studio

這時候可以嘗試以下指令，讓Flutter自動重新偵測路徑

$ flutter config --android-studio-dir=""
清空 "android-studio-dir" value.

$ flutter config --android-sdk=""
清空 "android-sdk" value.

IDE環境設定(以VSCode為例)

在開發上，官方推薦Android Studio或是Visual Studio Code這兩套編輯器，由於我比較熟悉VS Code，所以會以VSCode來介紹。

1. 打開VS Code
2. 按shift + command + p，開啟命令列，並搜尋install找到Extensions: Install Extensions
3. 搜尋Flutter並安裝，這個套件會同時安裝Flutter相關的plugins，需要花一點時間。
   
4. 安裝完後，再次叫出命令列，輸入Flutter: Run Flutter Doctor。
5. 此時有可能遇到找不到SDK的錯誤，如下圖：
   
6. 只需重新指定SDK所在的資料夾即可修復。
7. 成功即會開始運行flutter doctor的指令，並輸出結果。

測試第一個App

創建專案

1. 開啟已創建好的my_app資料夾，若無可以透過VS Code命令列搜尋Flutter: New Project創建一個新的專案資料夾。
2. 專案開啟後會看到右下有基本資訊，你可以選取你想預設啟用的模擬器。
   
3. 接下來運行Debug > Start Debugging或是按F5，編譯完成會自動啟動模擬器，並載入App。

測試Hot Reload

1. 開啟lib/main.dart
2. 嘗試修改字串內容。
   

總結

至此，環境已經全部完成了，明天會正式進入開發Flutter的介紹，會先介紹基礎的Dart語法，估計會循序漸進製作一個可以連線的小遊戲作為這次比賽的主題。