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 > 檢查更新，Linux 上的 幫助 > 檢查更新）。
2. 如果列出了 dart 或 flutter，請更新它們。

您可以以多種方式建立一個新專案。

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

在 Android Studio 中

1. 在 IDE 中，從 歡迎 視窗或從主 IDE 視窗的 檔案 > 新建 > 新建 Flutter 專案 單擊 新建 Flutter 專案。
2. 指定 Flutter SDK 路徑，然後單擊 下一步。
3. 輸入所需的 專案名稱、描述和 專案位置。
4. 如果您打算釋出此應用，設定公司域名。
5. 點選 Finish（完成）。

在 IntelliJ 中

1. 在 IDE 中，從 歡迎 視窗或從主 IDE 視窗的 檔案 > 新建 > 專案 單擊 新建專案。
2. 從左側面板的 生成器 列表中選擇 Flutter
3. 指定 Flutter SDK 路徑，然後單擊 下一步。
4. 輸入所需的 專案名稱、描述和 專案位置。
5. 如果您打算釋出此應用，設定公司域名。
6. 點選 Finish（完成）。

建立新應用時，一些 Flutter IDE 外掛會要求您提供以反向域名順序排列的組織名稱，例如 com.example。除了應用名稱之外，這還用作 Android 的包名稱，以及釋出應用時的 iOS 的 Bundle ID。如果您認為將來可能會發布此應用，最好現在指定這些資訊。釋出應用後，它們將無法更改。您的組織名稱應該是唯一的。

要開啟現有的 Flutter 專案

1. 在 IDE 中，從 歡迎 視窗單擊 開啟，或從主 IDE 視窗的 檔案 > 開啟。

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

3. 點選 Open。

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

• 語法高亮顯示。
• 基於豐富的型別分析的程式碼補全。
• 導航到型別宣告（導航 > 宣告），以及查詢型別用法（編輯 > 查詢 > 查詢用法）。
• 檢視所有當前原始碼問題（檢視 > 工具視窗 > Dart 分析）。任何分析問題都顯示在 Dart 分析窗格中
  

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

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

1. 找到 Flutter 目標選擇器 下拉按鈕。這將顯示可用目標的列表。
2. 選擇您希望應用啟動的目標。當您連線裝置或啟動模擬器時，會顯示其他條目。

1. 單擊工具欄中的 播放圖示，或呼叫 執行 > 執行。底部的 執行 窗格顯示日誌輸出。

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

Flutter 提供一流的開發週期，使您能夠透過 Stateful Hot Reload 功能幾乎立即看到更改的效果。要了解更多資訊，請檢視 熱過載。

要檢視效能資料，包括小部件重建資訊，請在 除錯 模式下啟動應用，然後使用 檢視 > 工具視窗 > Flutter 效能 開啟效能工具視窗。

要檢視有關哪些小部件正在重建以及重建頻率的統計資訊，請單擊 顯示小部件重建資訊 在 效能 窗格中。此幀的重建計數顯示在右側第二列中。對於大量重建，將顯示一個黃色旋轉圓圈。最右側的列顯示自進入當前螢幕以來小部件重建的次數。對於未重建的小部件，將顯示一個純灰色圓圈。否則，將顯示一個灰色旋轉圓圈。

此功能旨在讓您瞭解何時正在重建小部件——您可能在僅檢視程式碼時沒有意識到這一點。如果正在重建您沒有預料到的小部件，這可能表明您應該透過將大型構建方法拆分為多個小部件來重構程式碼。

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

1. 整個螢幕（或其大部分）由單個 StatefulWidget 構建，導致不必要的 UI 構建。將 UI 拆分為更小的小部件，並使用更小的 build() 函式。

2. 螢幕外的小部件正在重建。例如，當 ListView 巢狀在延伸到螢幕外的 tall Column 中時，可能會發生這種情況。或者，如果未為延伸到螢幕外的列表設定 RepaintBoundary，則會導致整個列表被重新繪製。

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

4. Opacity 小部件放置在小部件樹中過高。或者，透過直接操作 Opacity 小部件的不透明度屬性來建立不透明度動畫，從而導致小部件本身及其子樹重建。

您可以單擊表格中的一行以導航到原始碼中建立小部件的位置。當代碼執行時，旋轉圖示也會顯示在程式碼窗格中，以幫助您視覺化正在發生哪些重建。

請注意，大量重建並不一定表示存在問題。通常，只有在您已經在 profile 模式下執行應用並驗證效能不符合您的期望後，才應該擔心過多的重建。

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

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

輔助功能是與特定程式碼識別符號相關的程式碼更改。當游標放置在 Flutter 小部件識別符號上時，可用許多這些輔助功能，如黃色燈泡圖示所示。可以透過單擊燈泡或使用鍵盤快捷鍵（Linux 和 Windows 上的 Alt+Enter，macOS 上的 Option+Return）呼叫輔助功能，如圖所示

快速修復類似，但僅當代碼片段存在錯誤時才顯示，並且可以幫助糾正它。它們由一個紅色的燈泡指示。

當您希望將小部件包裝在周圍的小部件中時，可以使用它，例如，如果您想將小部件包裝在 Row 或 Column 中。

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

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

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

Flutter 外掛包含以下模板

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

您也可以在設定 > 編輯器 > 即時程式碼模板中定義自定義模板。

熱過載

在 Linux（鍵位對映XWin 預設值）和 Windows 上，鍵盤快捷鍵為 Control+Alt+; 和 Control+Backslash。

在 macOS（鍵位對映Mac OS X 10.5+ 複製）上，鍵盤快捷鍵為 Command+Option 和 Command+Backslash。

可以在 IDE 偏好設定/設定中更改鍵盤對映：選擇鍵位對映，然後在右上角的搜尋框中輸入flutter。右鍵單擊您想要更改的繫結，然後選擇新增鍵盤快捷鍵。

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

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

對於這些更改，您可以完全重啟您的應用程式，而無需結束您的除錯會話。要執行熱重啟，不要單擊“停止”按鈕，只需重新單擊“執行”按鈕（如果在執行會話中）或“除錯”按鈕（如果在除錯會話中），或者按住 Shift 鍵單擊“熱過載”按鈕。

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

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

• 在 “專案檢視”中，您應該在 Flutter 應用程式的根目錄下看到一個名為 android 的子目錄。右鍵單擊它，然後選擇 Flutter > 在 Android Studio 中開啟 Android 模組。
• 或者，您可以開啟 android 子目錄下的任何檔案進行編輯。然後，您應該在編輯器的頂部看到一個“Flutter 命令”橫幅，其中包含一個標有 在 Android Studio 中開啟編輯 的連結。單擊該連結。

對於這兩個選項，Android Studio 都會為您提供使用單獨視窗或用新專案替換現有視窗的選項。兩種選項都可以。

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

1. 單擊歡迎啟動螢幕上的 開啟現有的 Android Studio 專案，或如果 Android Studio 已經開啟，則單擊 檔案 > 開啟。
2. 開啟 Flutter 應用程式根目錄下的 android 子目錄。例如，如果專案名為 flutter_app，則開啟 flutter_app/android。

如果您尚未執行 Flutter 應用程式，您可能會看到 Android Studio 在開啟 android 專案時報告構建錯誤。在應用程式的根目錄中執行 flutter pub get，並透過選擇 構建 > 生成 來重建專案以解決此問題。

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

1. 在 偏好設定 > 外掛 中，如果尚未啟用，請啟用 Android 支援。
2. 右鍵單擊專案檢視中的 android 資料夾，然後選擇 開啟模組設定。
3. 在 源 選項卡中，找到 語言級別 欄位，然後選擇級別 8 或更高版本。
4. 在 依賴項 選項卡中，找到 模組 SDK 欄位，然後選擇 Android SDK。如果未列出 SDK，請單擊 新建 並指定 Android SDK 的位置。請確保選擇與 Flutter 使用的 Android SDK 匹配的 Android SDK（如 flutter doctor 報告）。
5. 單擊 確定。

Flutter 屬性編輯器是由 Flutter 外掛 提供的一項強大工具，它允許您直接從其視覺化介面檢視和修改小部件屬性。

1. 單擊 Android Studio 或 IntelliJ 側邊欄中的 Flutter 屬性編輯器 圖示 。
2. Flutter 屬性編輯器將載入到側面板中。
3. 請參閱 Flutter 屬性編輯器 文件 以獲取詳細的使用指南。

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

已知錯誤和功能請求在問題跟蹤器中跟蹤

• Flutter 外掛問題跟蹤器
• Dart 外掛問題跟蹤器

我們歡迎反饋，包括錯誤/問題和功能請求。在提交新問題之前

• 請在問題跟蹤器中快速搜尋，檢視是否已經跟蹤了該問題。
• 請確保您已 更新 到外掛的最新版本。

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