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，請更新它們。

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

在 Android Studio 和 IntelliJ 中，透過 Flutter 入門應用模板建立新專案的步驟略有不同。

在 Android Studio 中

1. 在 IDE 中，點選 Welcome 視窗中的 New Flutter Project，或點選主 IDE 視窗中的 File > New > New Flutter Project。
2. 指定 Flutter SDK path，然後點選 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，然後點選 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 Analysis 面板中。
  

執行和除錯透過主工具欄進行控制

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

1. 找到 Flutter Target Selector 下拉按鈕。這會顯示可用目標的列表。
2. 選擇你希望執行應用的目標。當你連線裝置或啟動模擬器時，會出現額外的條目。

1. 點選工具欄中的 播放圖示，或執行 Run > Run。底部的 Run 面板將顯示日誌輸出。

1. 如果需要，在原始碼中設定斷點。
2. 點選工具欄中的 除錯圖示，或執行 Run > Debug。
   • 底部的 Debugger 面板會顯示堆疊幀和變數。
   • 底部的 Console 面板會顯示詳細的日誌輸出。
   • 除錯基於預設的啟動配置。要自定義此配置，請點選裝置選擇器右側的下拉按鈕，並選擇 Edit configuration。

Flutter 提供了一流的開發週期，使你能夠透過 Stateful Hot Reload (有狀態熱過載) 功能幾乎瞬間看到更改的效果。要了解更多資訊，請檢視 熱過載。

要檢視效能資料（包括元件重建資訊），請在 Debug 模式下啟動應用，然後使用 View > Tool Windows > Flutter Performance 開啟效能工具視窗。

要檢視有關哪些元件正在被重建以及重建頻率的統計資訊，請點選 Performance 面板中的 Show widget rebuild information。本幀重建的確切計數顯示在右側第二列。對於重建次數較多的元件，會顯示一個黃色的旋轉圓圈。最右側的一列顯示自進入當前螢幕以來元件被重建的次數。對於未重建的元件，顯示為實心灰色圓圈。否則，顯示為灰色旋轉圓圈。

此功能的目的是讓你意識到元件何時正在重建——當你只看程式碼時，可能沒有意識到這一點。如果元件正在重建且超出了你的預期，這通常是一個訊號，你應該透過將大的 build 方法拆分為多個元件來重構程式碼。

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

1. 整個螢幕（或其中的很大一部分）由單個 StatefulWidget 構建，導致不必要的 UI 構建。將 UI 拆分為具有較小 build() 函式的較小元件。

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

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

4. Opacity 元件在元件樹中放置得不必要地高。或者，透過直接操作 Opacity 元件的 opacity 屬性來建立透明度動畫，導致元件本身及其子樹重建。

你可以點選表格中的某一行以導航到原始碼中建立該元件的行。隨著程式碼執行，旋轉圖示也會顯示在程式碼面板中，幫助你視覺化正在發生的重建。

請注意，大量的重建並不一定表示有問題。通常，你應該僅在已經以 profile 模式執行應用並確認效能未達到預期後，才去擔心過度的重建問題。

並且請記住，元件重建資訊僅在 debug 版本中可用。在真實裝置上以 profile 版本測試應用的效能，但在 debug 版本中除錯效能問題。

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

輔助功能 (Assists) 是與特定程式碼識別符號相關的程式碼更改。當游標位於 Flutter 元件識別符號上時，可以使用其中的許多功能，黃色燈泡圖示即為指示。可以透過點選燈泡或使用鍵盤快捷鍵（Linux 和 Windows 上為 Alt+Enter，macOS 上為 Option+Return）來呼叫輔助功能，如圖所示。

快速修復 (Quick Fixes) 類似，只是它們在一段程式碼有錯誤時顯示，並且可以幫助糾正錯誤。它們由一個紅色燈泡指示。

當你有一個想要用外層元件包裹的元件時，可以使用此功能，例如如果你想用 Row 或 Column 包裹一個元件。

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

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

即時模板 (Live templates) 可用於加快輸入典型程式碼結構的速度。它們透過輸入其字首，然後在程式碼補全視窗中進行選擇來呼叫。

Flutter 外掛包含以下模板

• 字首 stless：建立一個新的 StatelessWidget 子類。
• 字首 stful：建立一個新的 StatefulWidget 子類及其關聯的 State 子類。
• 字首 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 專案的根目錄並不會向 IDE 暴露所有的 Android 檔案。Flutter 應用包含一個名為 android 的子目錄。如果你在 Android Studio 中將此子目錄作為獨立的單獨專案開啟，IDE 將能夠全面支援編輯和重構所有 Android 檔案（如 Gradle 指令碼）。

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

• 在 "專案檢視" 中，你應該能在 flutter 應用根目錄下方立即看到一個名為 android 的子目錄。右鍵點選它，然後選擇 Flutter > Open Android module in Android Studio。
• 或者，你可以開啟 android 子目錄下的任何檔案進行編輯。然後，你應該會在編輯器頂部看到一個“Flutter commands”橫幅，其中包含一個標籤為 Open for Editing in Android Studio 的連結。點選該連結。

對於這兩種選項，Android Studio 都會讓你選擇是使用單獨的視窗，還是在開啟第二個專案時替換現有視窗。任一選項均可。

如果你還沒有在 Android Studio 中開啟 Flutter 專案，你可以從一開始就將 Android 檔案作為自己的專案開啟

1. 點選歡迎啟動螢幕上的 Open an existing Android Studio Project，或者如果 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（如果尚未啟用）。
2. 在專案檢視中右鍵點選 android 資料夾，選擇 Open Module Settings。
3. 在 Sources 選項卡中，找到 Language level 欄位，並選擇級別 8 或更高。
4. 在 Dependencies 選項卡中，找到 Module SDK 欄位，並選擇一個 Android SDK。如果沒有列出 SDK，請點選 New 並指定 Android SDK 的位置。確保選擇與 Flutter 使用的 Android SDK 相匹配的 SDK（如 flutter doctor 所報告的）。
5. 點選 OK。

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

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

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

已知的 Bug 和功能請求在問題追蹤系統中進行跟蹤

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

我們歡迎反饋，無論是關於 Bug/問題還是功能請求。在提交新問題之前

• 請在問題追蹤器中快速搜尋，看看該問題是否已經被跟蹤。
• 確保你已 更新 到外掛的最新版本。

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