編輯工具設定

你可以使用任意文字編輯器,結合我們的指令行工具來開發 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 擴充套件

  1. 開啟 VS Code

  2. 開啟瀏覽器,訪問市場的 Flutter 外掛 頁面。

  3. 點選 Install,安裝 Flutter 與 Dart 依賴。

驗證 VS Code 的設定

  1. 開啟 檢視 (View) > 指令面板 (Command Palette…)

    你也可以按下 Ctrl / Cmd + Shift + P

  2. 輸入 doctor

  3. 選擇 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

安裝過程如下:

  1. 開啟 Android Studio 或 IntelliJ。

  2. 從 macOS 的選單欄中開啟外掛設定。

    你也可以按下 Cmd + ,

    Preferences 彈窗會開啟。

  3. 在左側清單中選擇 Plugins

  4. 在面板的上方選擇 Marketplace

  5. 在搜尋框中輸入 flutter

  6. 選擇 Flutter 外掛。

  7. 點選 Install 安裝。

  8. 提示安裝時點選確認。如果提示同時安裝 Dart 外掛也點選確認。

  9. 當彈出重新啟動提示時,點選 Restart

Linux 或者 Windows 平台

參考使用下面介紹的步驟:

  1. 開啟 File > Settings

    你也可以按下 Cmd + ,

    Preferences 彈窗會開啟。

  2. 在左側清單中選擇 Plugins

  3. 在面板的上方選擇 Marketplace

  4. 在搜尋框中輸入 flutter

  5. 選擇 Flutter 外掛。

  6. 點選 Install 安裝。

  7. 提示安裝時點選確認。如果提示同時安裝 Dart 外掛也點選確認。

  8. 當彈出重新啟動提示時,點選 Restart