Android Studio 和 IntelliJ

• Android Studio 和 IntelliJ
• Visual Studio Code

安裝 Flutter 外掛後，Android Studio 和 IntelliJ IDEA 可提供完整的 IDE 體驗。

要安裝以下 IDE 的最新版本，請遵循其說明。

• Android Studio
• IntelliJ IDEA Community
• IntelliJ IDEA Ultimate

外掛會定期更新。當有可用更新時，IDE 會提示您。

手動檢查更新

1. 開啟首選項 (macOS 上為 **Android Studio > Check for Updates** (檢查更新)，Linux 上為 **Help > Check for Updates** (幫助 > 檢查更新))。
2. 如果列出了 dart 或 flutter，請更新它們。

您可以透過多種方式建立新專案。

從 Flutter 入門應用模板建立新的 Flutter 專案在 Android Studio 和 IntelliJ 之間有所不同。

在 Android Studio 中

1. 在 IDE 中，從 **Welcome** (歡迎) 視窗點選 **New Flutter Project** (新建 Flutter 專案)，或從主 IDE 視窗點選 **File > New > New Flutter Project** (檔案 > 新建 > 新建 Flutter 專案)。
2. 指定 **Flutter SDK path** (Flutter SDK 路徑) 並點選 **Next** (下一步)。
3. 輸入您想要的 **Project name** (專案名稱)、**Description** (描述) 和 **Project location** (專案位置)。
4. 如果您可能要釋出此應用，請設定公司域名。
5. 點選 Finish（完成）。

在 IntelliJ 中

1. 在 IDE 中，從 **Welcome** (歡迎) 視窗點選 **New Project** (新建專案)，或從主 IDE 視窗點選 **File > New > Project** (檔案 > 新建 > 專案)。
2. 在左側面板的 **Generators** (生成器) 列表中選擇 **Flutter**。
3. 指定 **Flutter SDK path** (Flutter SDK 路徑) 並點選 **Next** (下一步)。
4. 輸入您想要的 **Project name** (專案名稱)、**Description** (描述) 和 **Project location** (專案位置)。
5. 如果您可能要釋出此應用，請設定公司域名。
6. 點選 Finish（完成）。

建立新應用時，某些 Flutter IDE 外掛會要求提供反向域名順序的公司名稱，例如 com.example。此名稱與應用名稱一起，用作 Android 的包名稱，以及 iOS 釋出應用時的 Bundle ID。如果您認為將來可能要釋出此應用，最好現在就指定這些資訊。它們一旦釋出就無法更改。您的公司名稱應是唯一的。

開啟現有的 Flutter 專案

1. 在 IDE 中，從 **Welcome** (歡迎) 視窗點選 **Open** (開啟)，或從主 IDE 視窗點選 **File > Open** (檔案 > 開啟)。

2. 瀏覽到包含現有 Flutter 原始碼檔案的目錄。

3. 點選 Open。

Flutter 外掛執行程式碼分析，從而實現以下功能：

• 語法高亮。
• 基於豐富型別分析的程式碼補全。
• 導航到型別宣告 (Navigate > Declaration (導航 > 宣告))，並查詢型別用法 (Edit > Find > Find Usages (編輯 > 查詢 > 查詢用法))。
• 檢視所有當前原始碼問題 (View > Tool Windows > Dart Analysis (檢視 > 工具視窗 > Dart 分析))。任何分析問題都會顯示在 Dart 分析面板中。
  

執行和除錯由主工具欄控制。

當 IDE 中開啟 Flutter 專案時，您應該會在工具欄的右側看到一組 Flutter 特定的按鈕。

1. 找到 **Flutter Target Selector** (Flutter 目標選擇器) 下拉按鈕。它顯示了可用目標的列表。
2. 選擇要啟動應用的裝置。當您連線裝置或啟動模擬器時，會顯示其他條目。

1. 點選工具欄中的 **Play 圖示**，或呼叫 **Run > Run** (執行 > 執行)。底部的 **Run** (執行) 窗格顯示日誌輸出。

1. 如果需要，請在原始碼中設定斷點。
2. 點選工具欄中的 **Debug 圖示**，或呼叫 **Run > Debug** (執行 > 除錯)。
   • 底部的 **Debugger** (偵錯程式) 窗格顯示堆疊幀和變數。
   • 底部的 **Console** (控制檯) 窗格顯示詳細的日誌輸出。
   • 除錯基於預設的啟動配置。要自定義此配置，請點選裝置選擇器右側的下拉按鈕，然後選擇 **Edit configuration** (編輯配置)。

Flutter 提供一流的開發週期，讓您能夠透過 *有狀態熱過載* 功能幾乎即時地看到更改效果。要了解更多資訊，請參閱 熱過載。

要檢視包括 Widget 重建資訊在內的效能資料，請在 **Debug** (除錯) 模式下執行應用，然後使用 **View > Tool Windows > Flutter Performance** (檢視 > 工具視窗 > Flutter 效能) 開啟效能工具視窗。

要檢視有關哪些 Widget 被重建以及重建頻率的統計資訊，請在 **Performance** (效能) 窗格中點選 **Show widget rebuild information** (顯示 Widget 重建資訊)。此幀重建次數的確切計數顯示在從右數第二列。對於大量重建，會顯示一個黃色的旋轉圓圈。最右邊的列顯示自進入當前螢幕以來 Widget 被重建了多少次。對於未重建的 Widget，會顯示一個實心的灰色圓圈。否則，會顯示一個灰色的旋轉圓圈。

此功能的目的是讓您意識到 Widget 何時被重建——您在僅檢視程式碼時可能沒有意識到這種情況的發生。如果 Widget 被意外重建，這可能表明您應該透過將大型 build 方法拆分成多個 Widget 來重構程式碼。

此工具可以幫助您除錯至少四種常見的效能問題：

1. 整個螢幕（或大部分）由單個 StatefulWidget 構建，導致不必要的 UI 構建。將 UI 拆分成具有更小 build() 函式的較小 Widget。

2. 螢幕外的 Widget 被重建。例如，當 ListView 巢狀在延伸到螢幕外的長 Column 中時，可能會發生這種情況。或者，當列表沒有設定 RepaintBoundary 時，該列表延伸到螢幕外，導致整個列表被重繪。

3. AnimatedBuilder 的 build() 函式繪製了一個不需要動畫的子樹，導致靜態物件不必要地重建。

4. Opacity Widget 不必要地放置在 Widget 樹的較高層級。或者，透過直接操作 Opacity Widget 的不透明度屬性建立了 Opacity 動畫，導致該 Widget 及其子樹重建。

您可以點選表格中的一行，導航到建立 Widget 的原始碼行。當代碼執行時，旋轉圖示也會顯示在程式碼窗格中，以幫助您視覺化正在發生的重建。

請注意，多次重建不一定表示有問題。通常，只有當您已在 profile 模式下執行應用並確認效能不符合您的要求時，才應該擔心過度重建。

請記住，*Widget 重建資訊僅在 debug 構建中可用*。在 profile 構建中，在真實裝置上測試應用的效能，但在 debug 構建中除錯效能問題。

如果您有其他應分享的技巧，請告訴我們！

輔助功能是與特定程式碼識別符號相關的程式碼更改。當游標放在 Flutter Widget 識別符號上時，可以看到許多此類輔助功能，由黃色燈泡圖示指示。可以透過點選燈泡或使用鍵盤快捷鍵 (Linux 和 Windows 上為 Alt+Enter，macOS 上為 Option+Return) 來呼叫輔助功能，如下圖所示。

快速修復功能類似，它們顯示在程式碼有錯誤的部分，並可幫助糾正錯誤。它們由紅色燈泡指示。

當您有一個要包裝在外部 Widget 中的 Widget 時，可以使用此功能，例如，如果您想將 Widget 包裝在 Row 或 Column 中。

與上面的輔助功能類似，但用於包裝現有的 Widget 列表，而不是單個 Widget。

將 child 引數更改為 children 引數，並將引數值包裝在列表中。

即時模板可用於加快輸入典型程式碼結構的速度。透過鍵入它們的 prefix，然後在程式碼補全視窗中選擇它們來呼叫它們。

Flutter 外掛包含以下模板：

• Prefix stless：建立一個新的 StatelessWidget 子類。
• Prefix stful：建立一個新的 StatefulWidget 子類及其關聯的 State 子類。
• Prefix stanim：建立一個新的 StatefulWidget 子類及其關聯的 State 子類，其中包含一個用 AnimationController 初始化的欄位。

您也可以在 **Settings > Editor > Live Templates** (設定 > 編輯器 > 即時模板) 中定義自定義模板。

熱過載

在 Linux (鍵對映 *Default for XWin*) 和 Windows 上，鍵盤快捷鍵是 Control+Alt+; 和 Control+Backslash。

在 macOS (鍵對映 *Mac OS X 10.5+ copy*) 上，鍵盤快捷鍵是 Command+Option 和 Command+Backslash。

可以在 IDE 首選項/設定中更改鍵盤對映：選擇 Keymap (鍵對映)，然後在右上角的搜尋框中輸入 flutter。右鍵單擊要更改的繫結，然後選擇 Add Keyboard Shortcut (新增鍵盤快捷鍵)。

熱過載透過將更新的原始碼檔案注入正在執行的 Dart VM (虛擬機器) 來工作。這不僅包括新增新類，還包括向現有類新增方法和欄位，以及更改現有函式。但是，有幾種程式碼更改無法進行熱過載。

• 全域性變數初始化程式
• 靜態欄位初始化程式
• 應用的 main() 方法

對於這些更改，您可以完全重新啟動應用程式，而無需結束除錯會話。要執行熱重啟，請不要點選停止按鈕，只需重新點選執行按鈕 (如果在執行會話中) 或除錯按鈕 (如果在除錯會話中)，或按住 Shift 點選“熱過載”按鈕。

開啟 Flutter 專案的根目錄並不能將所有 Android 檔案暴露給 IDE。Flutter 應用包含一個名為 android 的子目錄。如果您將此子目錄作為單獨的專案在 Android Studio 中開啟，IDE 將能夠完全支援編輯和重構所有 Android 檔案 (如 Gradle 指令碼)。

如果您已經將整個專案作為 Flutter 應用在 Android Studio 中開啟，有兩種等效的方法可以單獨開啟 Android 檔案以便在 IDE 中進行編輯。在嘗試此操作之前，請確保您使用的是最新版本的 Android Studio 和 Flutter 外掛。

• 在 “Project view” (專案檢視) 中，您應該會在 flutter 應用根目錄的正下方看到一個名為 android 的子目錄。右鍵單擊它，然後選擇 Flutter > Open Android module in Android Studio (Flutter > 在 Android Studio 中開啟 Android 模組)。
• 或者，您可以開啟 android 子目錄下的任何檔案進行編輯。然後，您應該會在編輯器頂部看到一個“Flutter commands” (Flutter 命令) 橫幅，其中有一個標有 Open for Editing in Android Studio (在 Android Studio 中開啟進行編輯) 的連結。點選該連結。

對於這兩種選項，Android Studio 都為您提供了在使用新專案時選擇使用單獨的視窗或替換現有視窗的選項。任一選項均可。

如果您尚未在 Android Studio 中開啟 Flutter 專案，您可以從一開始就將 Android 檔案作為自己的專案開啟。

1. 在歡迎螢幕上點選 **Open an existing Android Studio Project** (開啟現有的 Android Studio 專案)，或者如果 Android Studio 已開啟，則點選 **File > Open** (檔案 > 開啟)。
2. 開啟 flutter 應用根目錄正下方的 android 子目錄。例如，如果專案名為 flutter_app，則開啟 flutter_app/android。

如果您尚未執行 Flutter 應用，則在開啟 android 專案時，Android Studio 可能會報告構建錯誤。在應用的根目錄中執行 flutter pub get，然後透過選擇 **Build > Make** (構建 > 製作) 來重新構建專案以修復此問題。

要啟用 IntelliJ IDEA 中的 Android 程式碼編輯，您需要配置 Android SDK 的位置。

1. 在 **Preferences > Plugins** (首選項 > 外掛) 中，如果您尚未啟用 **Android Support** (Android 支援) 則啟用它。
2. 右鍵單擊“Project”檢視中的 **android** 資料夾，然後選擇 **Open Module Settings** (開啟模組設定)。
3. 在 **Sources** (源) 選項卡中，找到 **Language level** (語言級別) 欄位，然後選擇級別 8 或更高。
4. 在 **Dependencies** (依賴項) 選項卡中，找到 **Module SDK** (模組 SDK) 欄位，然後選擇一個 Android SDK。如果沒有列出 SDK，請點選 **New** (新建) 並指定 Android SDK 的位置。確保選擇與 Flutter 使用的 Android SDK 匹配的 SDK (由 flutter doctor 報告)。
5. 點選 **OK** (確定)。

Flutter 屬性編輯器是 Flutter 外掛提供的一個強大工具，允許您直接透過其視覺化介面檢視和修改 Widget 屬性。

1. 點選 Android Studio 或 IntelliJ 側邊欄中的 Flutter 屬性編輯器 **圖示** 。
2. Flutter 屬性編輯器將在側邊面板中載入。
3. 有關詳細的使用指南，請參閱 Flutter 屬性編輯器 文件。

重要的已知問題，可能會影響您的體驗，已記錄在 Flutter 外掛 README 檔案中。

所有已知錯誤都在問題跟蹤器中跟蹤。

• Flutter 外掛：GitHub issue tracker (GitHub 問題跟蹤器)
• Dart 外掛：JetBrains YouTrack

我們歡迎有關 Bug/問題的反饋以及功能請求。在提交新問題之前：

• 在問題跟蹤器中進行快速搜尋，以檢視問題是否已被跟蹤。
• 確保您已更新到最新版本的外掛。

提交新問題時，請包含 flutter doctor 的輸出。