跳至主要內容

設定編輯器

您可以使用任何文字編輯器或整合開發環境 (IDE) 搭配 Flutter 的命令列工具來建置應用程式。Flutter 團隊建議使用支援 Flutter 擴充功能或外掛程式的編輯器,例如 VS Code 和 Android Studio。這些外掛程式提供程式碼完成、語法醒目提示、Widget 編輯協助、執行與偵錯支援等功能。

您可以為 Visual Studio Code、Android Studio 或 IntelliJ IDEA Community、Educational 和 Ultimate 版本新增支援的插件。 Flutter 插件適用於 Android Studio 和所列的 IntelliJ IDEA 版本。

Dart 插件支援另外八個 JetBrains IDE。)

請依照下列步驟將 Flutter 插件新增至 VS Code、Android Studio 或 IntelliJ。

如果您選擇其他 IDE,請跳至撰寫您的第一個 Flutter 應用程式

安裝 VS Code

#

VS Code 是一個程式碼編輯器,用於建置和偵錯應用程式。安裝 Flutter 擴充功能後,您可以編譯、部署和偵錯 Flutter 應用程式。

若要安裝最新版本的 VS Code,請依照 Microsoft 針對相關平台的指示進行

安裝 VS Code Flutter 擴充功能

#
  1. 啟動 VS Code

  2. 開啟瀏覽器並前往 Visual Studio Marketplace 上的Flutter 擴充功能頁面。

  3. 按一下 Install (安裝)。安裝 Flutter 擴充功能也會安裝 Dart 擴充功能。

驗證您的 VS Code 設定

#
  1. 前往 View (檢視) > Command Palette... (命令面板...)。

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

  2. 輸入 doctor

  3. 選取 Flutter: Run Flutter Doctor (Flutter:執行 Flutter Doctor)。

    選取此命令後,VS Code 會執行以下操作。

    • 開啟 Output (輸出) 面板。
    • 在此面板右上角的下拉式選單中顯示 flutter (flutter)
    • 顯示 Flutter Doctor 命令的輸出。

安裝 Android Studio 或 IntelliJ IDEA

#

安裝 Flutter 插件後,Android Studio 和 IntelliJ IDEA 會提供完整的 IDE 體驗。

若要安裝下列 IDE 的最新版本,請依照其指示進行

安裝 Flutter 插件

#

安裝說明因平台而異。

macOS

#

請依照下列適用於 macOS 的說明進行

  1. 啟動 Android Studio 或 IntelliJ。

  2. 從 macOS 選單列,前往 Android Studio (或 IntelliJ) > Settings... (設定...)。

    您也可以按下 Cmd + ,

    隨即開啟 Preferences (偏好設定) 對話方塊。

  3. 從左側清單中,選取 Plugins (插件)。

  4. 從此面板的頂端,選取 Marketplace (市集)。

  5. 在插件搜尋欄位中輸入 flutter

  6. 選取 Flutter 插件。

  7. 按一下 Install (安裝)。

  8. 出現提示時,按一下 Yes (是) 以安裝插件。

  9. 出現提示時,按一下 Restart (重新啟動)。

Linux 或 Windows

#

請依照下列適用於 Linux 或 Windows 的說明進行

  1. 前往 File (檔案) > Settings (設定)。

    您也可以按下 Ctrl + Alt + S

    隨即開啟 Preferences (偏好設定) 對話方塊。

  2. 從左側清單中,選取 Plugins (插件)。

  3. 從此面板的頂端,選取 Marketplace (市集)。

  4. 在插件搜尋欄位中輸入 flutter

  5. 選取 Flutter 插件。

  6. 按一下 Install (安裝)。

  7. 出現提示時,按一下 Yes (是) 以安裝插件。

  8. 出現提示時,按一下 Restart (重新啟動)。