官方推薦三個編輯器作為開發Flutter的IDE,分別是:VS Code , IntelliJ 和Android Studio。由於我們安卓團隊主要用的為Android Stuidio,所以我們首選用Android Stuidio,而官方中主要介紹的是IntelliJ,操作上有一定差異,所以在這裡主要介紹一下用Android Stuidio開發Flutter
一、支援版本
需要 Android Studio3.0或更高版本,才能支援Flutter 的開發下載地址: Android Studio,
二、安裝外掛
Android Studio要進行Flutter的開發,還需要安裝兩個外掛:Flutter外掛: 支援Flutter開發工作流 (執行、除錯、熱過載等).Dart外掛: 提供程式碼分析 (輸入程式碼時進行驗證、程式碼補全等).
安裝方式:在Preferences>
Plugins中進行安卓,如圖:

在Plugins中點Browse repositories,然後搜尋Flutter
和Dart


然後便可以開始安裝,安裝過程中可能會出錯,多嘗試幾次。
安裝完成後重啟Android Studio後外掛生效。
三、開啟或建立Flutter 工程
1、新建Flutter工程
進入File-New-New Flutter Project(或者在Android studio啟動引導介面建立),然後選擇Flutter Application,再填寫工程名、路徑等資訊便新建了一個Flutter工程



2、開啟已有的Flutter工程
這一點和官方的介紹IntelliJ的操作差異比較大。
在Android studio啟動引導介面選擇Open a existing Android Studio Project(或者在File-Open進行開啟),然後選擇Flutter工程的主目錄,開啟




四、執行工程
點選在工程右上角的三角形,便可以執行工程,左邊還可以選擇執行裝置

五、熱過載
Android Studion提供了Flutter熱過載,無需重啟應用程式就能實時載入修改後的程式碼,並且不會丟失狀態。點選編輯器右上角的閃電⚡️圖示,或者Command+s(Ctrl+S),儲存程式碼,變回進行熱過載
