如何將 flutter 執行在模擬器與實機上

上一篇文章介紹如何 建立 flutter 開發環境，本篇介紹如何將專案執行在 Android、iOS 模擬器與實體機器上

以下操作均以 Mac 操作、VS Code 作為開發工具為主

Step 1. 建立 flutter 專案

開啟 VS Code 後，使用快速鍵 cmd + shift + p 或左下小角的設定叫出「命令選擇區」

輸入 flutter，選擇 Flutter: New Project

輸入希望的專案名稱

選擇儲存專案的位置

即可建立 flutter 專案

Step 2. 執行在 iOS 模擬器

點選右下角的「No Device」，並選擇「Start iOS Simulator」

即可開啟 iOS 模擬器

圖片來源：The Ultimate Guide To iPhone Resolutions

開啟模擬器後。選擇「執行」，並建立 launch.json 檔案

建立成功，專案會多一個.vscode 檔案夾與 launch.json 檔案

回到「執行」，點選左上角綠色箭頭「開始偵錯」，右下角開始進行編譯並將程式跑起來

編譯完成，將程式寫進模擬器中，完成後會顯示以下的畫面

Setp 3. 執行在 Androd 模擬器

由於還沒有 Android 模擬器，需要先從 Android Studio 中建立 Android 模擬器

開啟 Android Studio，選擇右下角「Configura -> AVD Manager」

選擇「＋ Create Virtual Device…」

這邊選擇你要的模擬器尺寸

選擇該模擬器的 Android 版本，請自行下載需要的版本

命名 AVD 與確認 AVD 相關資訊後，按下右下角「Finish」建立該 AVD

Android Virtual Device Manager 即出現剛建立完成的 AVD

回到 VS Code 中，同樣點選點選右下角的「No Device」，出現了剛剛建立的 AVD

選擇後，便開啟 Android 模擬器

同樣回到「執行」，點選左上角綠色箭頭「開始偵錯」，右下角開始進行編譯並將程式跑起來」

編譯完成，將程式寫進模擬器中，完成後會顯示以下的畫面

Setp 4. 執行在 iOS 實機

要將程式執行在 iOS 實機上，需要準備以下的東西

• Apple 開發者帳號(可以先不繳交年費)
• iPhone 一台
• 安裝 cocoapods
• 安裝 Xcode

打開「終端機」，透過 cd 指令，進入到剛剛建立的 flutter 專案，並在專案底下輸入「open ios/Runner.xcworkspace」，參考如下

1
2

cd Dev/App/{you flutter project name}
open ios/Runner.xcworkspace

輸入完畢，自定打開 Xcode，接著左側的導航面板中選擇 Runner 項目，並選擇「Signing & Capabilities > Team(Add Account…)」

輸入 Apple 開發者帳號

確認帳號資訊

在 Team 選擇 Apple 開發者帳號與修改「Bundle Identifier」

將 iPhone 與電腦連接，手機會出現是否「信任這部電腦？」

選擇「信任」後，查看 Xcode 中的裝置列表會出現該手機

回到「終端機」中輸入下列指令，會看到「連線裝置數」與「裝置詳細狀態」

1
2

flutter doctor
flutter devices

回到 VS Code 會看到，已有連結的手機裝置可以選擇

選擇手機後，同樣回到「執行」，點選左上角綠色箭頭「開始偵錯」，右下角開始進行編譯並將程式跑起來

編譯完成，將程式寫進實機中。後發現開啟應用程式後出現以下畫面

這時候請至手機中的「設定 -> 一般 -> 裝置管理 -> 該APP」信任該 App

信任 App 後，即可進入該 App

Setp 5. 執行在 Android 實機

相較於 iOS，Android 要跑在實機中相對簡單多了，只需要準備下列東西就可以了

• Android 手機一台

將Android 手機與電腦連線後，Android 手機通常會出現以下畫面，選擇「確定」即可

打開手機的開發者模式中的「USB 偵錯」，由於 Android 廠牌眾多，就不逐一介紹如何開啟開發者模式，請自行去針對手機廠牌去 google

回到 VS Code，會看到已有連結的手機裝置可以選擇

選擇手機後，同樣回到「執行」，點選左上角綠色箭頭「開始偵錯」，右下角開始進行編譯並將程式跑起來

執行完成，就會自動進入到應用程式的畫面了

Setp 6. 參考資料

• 新增 iPhone 模擬器(simulator)

• Deploy to iOS devices

• Set up your Android device