編輯工具設定

你可以使用任意文字編輯器，結合我們的命令列工具來開發 Flutter 應用。然而，我們推薦使用我們的編輯器外掛以獲取更好的開發體驗。這些外掛提供了程式碼自動完成、程式碼高亮、widget 輔助編輯的功能，以及為專案的執行和除錯提供支援等。

參考以下步驟為 VS Code、Android Studio、IntelliJ 或者 Emacs 新增編輯器外掛。如果你想使用其他的編輯器，請直接開啟 下一節: 開發體驗初探，來檢視使用其他文字編輯器配合命令列工具來建立和執行 Flutter 應用。

安裝 VS Code

VS Code 是一個可以執行和除錯 Flutter 的輕量級編輯器。

安裝 Flutter 和 Dart 外掛

  1. 開啟 VS Code。

  2. 開啟 View > Command Palette…。

  3. 輸入「install」，然後選擇 Extensions: Install Extensions。

  4. 在擴充搜尋輸入框中輸入「flutter」，然後在列表中選擇 Flutter 並單擊 Install。此過程中會自動安裝必需的 Dart 外掛。

  5. 點選 Reload to Activate 以重新啟動 VS Code。

透過 Flutter Doctor 命令驗證是否安裝成功

  1. 開啟 View > Command Palette…。

  2. 輸入 “doctor”，選擇 Flutter: Run Flutter Doctor。

  3. 開啟 OUTPUT 面板檢視是否有錯誤，確保在不同的輸出選項 (Output Options) 的下拉列表中選擇了 Flutter。

安裝 Android Studio

Android Studio 為 Flutter 提供了一個完整的整合開發環境。

同時, 你也可以使用 IntelliJ：

安裝 Flutter 和 Dart 外掛

請參考下面不同平台的安裝指南：

Mac

安裝過程如下：

  1. 開啟 Android Studio。

  2. 開啟外掛設定（在 v3.6.3.0 以上的系統開啟 Preferences > Plugins）。

  3. 然後選擇 Flutter 外掛並點選 安裝。

  4. 當彈出安裝 Dart 外掛提示時，點選 Yes。

  5. 當彈出重新啟動提示時，點選 Restart。

Linux 或者 Windows 平台

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

  1. 開啟外掛偏好設定 (位於 File > Settings > Plugins)

  2. 選擇 Marketplace (擴充商店)，選擇 Flutter plugin 然後點選 Install (安裝)。

安裝 Emacs 編輯器

Emacs 是一個輕量級的編輯器，支援 Flutter 和 Dart。

  • 最新版本的 Emacs 編輯器。

安裝 lsp-dart 這個 package

關於如何安裝和使用 lsp-dart 這個 package，可以檢視 lsp-dart 文件。