透過上一堂課的學習,相信你已經完成 Flutter 開發環境的安裝,本單元我們將使用 Android Studio 開發 Flutter 專案。
安裝 Flutter 外掛
預設情況下 Android Studio 並未內建 Flutter 支援,必須手動安裝 Flutter 專用外掛。
開啟 Android Studio 後,點擊上方選單 File → Settings(快捷鍵 Ctrl+Alt+S)

切換到左側的外掛頁籤,搜尋 flutter 後點擊安裝,安裝完成後重新啟動 Android Studio。
設定 Flutter SDK 路徑
僅安裝外掛還不夠,需在 Android Studio 內指定 Flutter SDK 的存放路徑。
File → Settings → Languages & Frameworks → Flutter
檔案 設定 語言與框架 flutter


路徑只需選取 flutter 根目錄,不用進入 bin 資料夾,接著點擊 apply 按鈕。

等待工具自動完成安裝與環境設定。
建立專案
後續建立專案的流程,和一般使用 Android Studio 的操作方式完全相同。


選擇 Flutter 範本,右側再次確認 Flutter 目錄後點擊 Next。

接下來填寫專案資訊:專案名稱、專案存放路徑、專案描述與組織代號。組織代號必須具備唯一性,若未來要上架 Google Play,建議使用反向網域名稱,以本篇示範為例就是 com.foxdevelop.專案名。接著選擇 Android 原生語言,此設定僅影響 Android 底層殼層,開發邏輯依舊使用 Dart。下方 Platforms 為專案可編譯發布的平台,本次示範勾選 Android、網頁與 Windows 桌面程式;若需發布 iOS、Linux 或 macOS 軟體,再另外勾選對應選項,最後點擊 Create。
注意:專案名稱只能使用小寫英文字母,不可有空格或特殊符號。
Android Studio 隨即開始產生專案檔案,此步驟會耗費一些時間。

這邊示範過程中遇到了錯誤。

點擊 Run Flutter Doctor 執行 Flutter 診斷工具檢查環境問題。
檢查完畢後專案可正常載入,但仍有另一個問題。
右上角執行按鈕無法正常啟動專案,畫面如下:

我更換了介面主題顏色,因此截圖中的 Android Studio 為淺色模式。
截圖可看見紅色叉號,點擊該圖示。

選擇編輯執行設定。

系統會提示尚未設定 Dart SDK,點擊右側 Fix 修復按鈕。
接著指定 Dart SDK 資料夾,安裝 Flutter 後 Dart 會內建在 Flutter SDK 目錄內。
假設你的 Flutter SDK 路徑為:
對應的 Dart SDK 路徑就是:


依照上方截圖完成 Dart SDK 設定,記得重新啟動 Android Studio。

重啟後上方工具列會出現綠色三角形執行按鈕,旁邊下拉選單顯示 Windows desktop,代表可將專案以 Windows 桌面程式執行,點擊綠色三角形即可啟動專案。
常見錯誤排除
若沒有出現以下問題,可直接跳過此段落。


出現以上錯誤代表套件依賴下載失敗,大多是網路環境造成,可透過鏡像站點解決。

遇到這類依賴錯誤時,參考截圖在 Android Studio 內建終端輸入鏡像設定指令:
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getCode language: PHP (php)
指令執行完畢後,所有程式碼相關錯誤就會全部消失。

執行專案
點擊左上角綠色三角形執行專案。Flutter 支援多平台除錯,你可以連接手機並開啟開發者模式測試 Android App;若沒有實體手機,也能直接使用 Windows Desktop 做為除錯平台。

截圖下拉選單會顯示建立專案時勾選的三個平台,本篇示範選擇 Windows desktop,接著點擊綠色三角形執行專案。

上方視窗就是我們第一支完整的 Flutter 應用程式。本課程到此結束,各位可以自行操作練習;若遇到任何問題,歡迎在下方留言提問。