編輯工具設定
你可以使用任意文字編輯器,結合我們的指令行工具來開發 Flutter 應用。 Flutter 團隊推薦使用支援 Flutter 外掛的編輯器,以獲取更好的開發體驗。這些外掛提供了程式碼補全、程式碼高亮、widget 輔助編輯的功能,以及為專案的執行和除錯提供支援等。
你可以為 Visual Studio Code、Android Studio 以及 IntelliJ IDEA(Community、Educational、Ultimate 版)新增編輯器支援的外掛。 Flutter 外掛 僅 適用於 Android Studio 和 IntelliJ IDEA 所列的版本。
(Dart 外掛 支援另外八個 JetBrains IDE。)
參考以下步驟為 VS Code、Android Studio 或者 IntelliJ 新增編輯器外掛。
如果你想使用其他的編輯器,請前往 下一節: 開發體驗初探。
安裝 VS Code
VS Code 是一個可以執行和除錯 Flutter 的編輯器。安裝 Flutter 外掛後,你可以編譯、部署及除錯 Flutter 應用。
請參考 Microsoft 針對不同平台的安裝指引來安裝最新版本的 VS Code:
安裝 VS Code 的 Flutter 擴充套件
-
開啟 VS Code。
-
開啟瀏覽器,訪問市場的 Flutter 外掛 頁面。
-
點選 Install,安裝 Flutter 與 Dart 依賴。
驗證 VS Code 的設定
-
開啟 檢視 (View) > 指令面板 (Command Palette…)。
你也可以按下 Ctrl / Cmd + Shift + P。
-
輸入
doctor
。 -
選擇 Flutter: Run Flutter Doctor。輸出結果會顯示在 輸出 (Output) 面板中。
選擇該指令後,VS Code 會執行以下操作。
-
開啟 輸出 (Output) 面板。
-
在此面板右上方的下拉選單中選擇 flutter (flutter)。
-
顯示 Flutter Doctor 指令的輸出內容。
-
安裝 Android Studio 或 IntelliJ IDEA
Android Studio 和 IntelliJ IDEA 為 Flutter 提供了一個完整的整合開發環境。
你可以按照以下指引安裝對應 IDE 的最新版本:
安裝 Flutter 和 Dart 外掛
請參考下面不同平台的安裝指南:
macOS
安裝過程如下:
-
開啟 Android Studio 或 IntelliJ。
-
從 macOS 的選單欄中開啟外掛設定。
你也可以按下 Cmd + ,。
Preferences 彈窗會開啟。
-
在左側清單中選擇 Plugins。
-
在面板的上方選擇 Marketplace。
-
在搜尋框中輸入
flutter
。 -
選擇 Flutter 外掛。
-
點選 Install 安裝。
-
提示安裝時點選確認。如果提示同時安裝 Dart 外掛也點選確認。
-
當彈出重新啟動提示時,點選 Restart。
Linux 或者 Windows 平台
參考使用下面介紹的步驟:
-
開啟 File > Settings。
你也可以按下 Cmd + ,。
Preferences 彈窗會開啟。
-
在左側清單中選擇 Plugins。
-
在面板的上方選擇 Marketplace。
-
在搜尋框中輸入
flutter
。 -
選擇 Flutter 外掛。
-
點選 Install 安裝。
-
提示安裝時點選確認。如果提示同時安裝 Dart 外掛也點選確認。
-
當彈出重新啟動提示時,點選 Restart。