跳至主要內容
目錄

Android Studio 和 IntelliJ

目錄

安裝與設定

#

依照設定編輯器說明來安裝 Dart 和 Flutter 外掛程式。

更新外掛程式

#

外掛程式的更新會定期發佈。當有更新可用時，IDE 中應會提示您。

若要手動檢查更新

  1. 開啟偏好設定 (macOS 上為 Android Studio > 檢查更新，Linux 上為 說明 > 檢查更新)。
  2. 如果列出 dart 或 flutter，請更新它們。

建立專案

#

您可以用數種方式建立新專案。

建立新專案

#

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

在 Android Studio 中

  1. 在 IDE 中，從 歡迎 視窗點擊 新 Flutter 專案，或從主要 IDE 視窗點擊 檔案 > 新增 > 新 Flutter 專案。
  2. 指定 Flutter SDK 路徑，然後點擊 下一步。
  3. 輸入您想要的 專案名稱、描述 和 專案位置。
  4. 如果您可能會發佈此應用程式，請設定公司網域。
  5. 點擊 完成。

在 IntelliJ 中

  1. 在 IDE 中，從 歡迎 視窗點擊 新專案，或從主要 IDE 視窗點擊 檔案 > 新增 > 專案。
  2. 從左側面板的 產生器 清單中選擇 Flutter。
  3. 指定 Flutter SDK 路徑，然後點擊 下一步。
  4. 輸入您想要的 專案名稱、描述 和 專案位置。
  5. 如果您可能會發佈此應用程式，請設定公司網域。
  6. 點擊 完成。

設定公司網域

#

建立新應用程式時，某些 Flutter IDE 外掛程式會要求您輸入以反向網域順序排列的組織名稱，例如 com.example。連同應用程式的名稱，這會用於 Android 的套件名稱，以及應用程式發佈時的 iOS 的 Bundle ID。如果您認為您可能會發佈此應用程式，最好現在就指定這些。一旦發佈應用程式，就無法變更它們。您的組織名稱應該是唯一的。

從現有原始碼開啟專案

#

若要開啟現有的 Flutter 專案

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

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

  3. 點擊 開啟。

編輯程式碼和檢視問題

#

Flutter 外掛程式會執行程式碼分析，以啟用以下功能：

  • 語法突顯。
  • 根據豐富的類型分析進行程式碼完成。
  • 導覽至類型宣告 (導覽 > 宣告) 以及尋找類型用法 (編輯 > 尋找 > 尋找用法)。
  • 檢視所有目前的原始碼問題 (檢視 > 工具視窗 > Dart 分析)。任何分析問題都會顯示在 Dart 分析窗格中。
    Dart Analysis pane

執行與除錯

#

執行和除錯是從主工具列控制的。

Main IntelliJ toolbar

選擇目標

#

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

  1. 找到 Flutter 目標選取器 下拉式按鈕。這會顯示可用的目標清單。
  2. 選取您要啟動應用程式的目標。當您連線裝置或啟動模擬器時，會出現其他項目。

不使用中斷點執行應用程式

#
  1. 點擊工具列中的 播放圖示，或呼叫 執行 > 執行。底部的 執行 窗格會顯示記錄輸出。

使用中斷點執行應用程式

#
  1. 如果需要，請在您的原始碼中設定中斷點。
  2. 點擊工具列中的 除錯圖示，或呼叫 執行 > 除錯。
    • 底部的 除錯器 窗格會顯示堆疊框架和變數。
    • 底部的 主控台 窗格會顯示詳細的記錄輸出。
    • 除錯是根據預設的啟動組態。若要自訂此組態，請點擊裝置選取器右側的下拉式按鈕，然後選取 編輯組態。

快速編輯和重新整理開發週期

#

Flutter 提供一流的開發人員週期，讓您可以使用 具狀態熱重載 功能幾乎立即看到變更的效果。若要了解更多資訊，請查看 熱重載。

顯示效能資料

#

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

Flutter performance window

若要查看關於哪些 widget 正在重建以及重建頻率的統計資料，請在 效能 窗格中點擊 顯示 widget 重建資訊。此畫面重建的確切計數顯示在從右數來的第二個欄中。對於大量的重建，會顯示黃色旋轉圓圈。最右邊的欄會顯示自進入目前畫面以來 widget 被重建的次數。對於未重建的 widget，會顯示實心的灰色圓圈。否則，會顯示灰色旋轉圓圈。

此功能的目的在於讓您知道何時 widget 正在重建 — 當您僅查看程式碼時，可能不會意識到這一點。如果正在重建您不預期的 widget，這可能表示您應該將大型建置方法分割成多個 widget 來重構您的程式碼。

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

  1. 整個螢幕 (或其中的大部分) 由單一 StatefulWidget 建置，導致不必要的 UI 建置。使用較小的 build() 函式將 UI 分割成較小的 widget。

  2. 正在重建螢幕外的 widget。例如，當 ListView 巢狀在延伸至螢幕外的長 Column 中時，可能會發生這種情況。或者當未針對延伸至螢幕外的清單設定 RepaintBoundary 時，導致重新繪製整個清單。

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

  4. Opacity widget 不必要地放置在 widget 樹狀結構中較高的位置。或者，Opacity 動畫是透過直接操作 Opacity widget 的 opacity 屬性來建立的，導致 widget 本身及其子樹狀結構重建。

您可以點擊表格中的某一行以導覽至建立 widget 的原始碼中的行。當程式碼執行時，旋轉圖示也會顯示在程式碼窗格中，以協助您視覺化正在發生的重建。

請注意，大量的重建並不一定表示存在問題。通常，只有當您已經在效能分析模式下執行應用程式並驗證效能不符合您的需求時，才需要擔心過多的重建。

請記住，widget 重建資訊僅在除錯建置中可用。在效能分析建置中於真實裝置上測試應用程式的效能，但在除錯建置中除錯效能問題。

Flutter 程式碼的編輯提示

#

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

輔助 & 快速修復

#

輔助是與特定程式碼識別碼相關的程式碼變更。當游標放置在 Flutter widget 識別碼上時，會有一些可用的輔助，如黃色燈泡圖示所示。可以點擊燈泡或使用鍵盤快捷鍵 (Linux 和 Windows 上為 Alt+Enter，macOS 上為 Option+Return) 來呼叫輔助，如此處所示

IntelliJ editing assists

快速修復類似，只是當程式碼有錯誤時會顯示，並且可以協助更正錯誤。它們以紅色燈泡指示。

使用新 widget 輔助包裝

#

當您有一個想要包裝在周圍 widget 中的 widget 時，可以使用此輔助，例如，如果您想要將 widget 包裝在 Row 或 Column 中。

使用新 widget 輔助包裝 widget 清單

#

與上述輔助類似，但適用於包裝現有的 widget 清單，而不是個別 widget。

將子系轉換為子系輔助

#

將子系引數變更為子系引數，並將引數值包裝在清單中。

即時範本

#

即時範本可用於加速輸入典型的程式碼結構。它們是透過輸入其前綴，然後在程式碼完成視窗中選取它來呼叫的。

IntelliJ live templates

Flutter 外掛程式包含以下範本：

  • 前綴 stless：建立 StatelessWidget 的新子類別。
  • 前綴 stful：建立一個新的 StatefulWidget 子類別及其相關的 State 子類別。
  • 前綴 stanim：建立一個新的 StatefulWidget 子類別及其相關的 State 子類別，並包含一個以 AnimationController 初始化的欄位。

您也可以在「設定 > 編輯器 > Live Templates」中定義自訂範本。

鍵盤快捷鍵

#

熱重載

在 Linux (鍵盤配置 Default for XWin) 和 Windows 上，鍵盤快速鍵為 Control+Alt+; 和 Control+反斜線。

在 macOS (鍵盤配置 Mac OS X 10.5+ copy) 上，鍵盤快速鍵為 Command+Option 和 Command+反斜線。

鍵盤映射可以在 IDE 的偏好設定/設定中變更：選取Keymap，然後在右上角的搜尋框中輸入 flutter。右鍵點擊您想要變更的綁定，然後選取新增鍵盤快速鍵。

IntelliJ settings keymap

熱重載 vs. 熱重新啟動

#

熱重載的運作方式是將更新後的原始碼檔案注入到正在運行的 Dart VM（虛擬機器）中。這不僅包括新增類別，還包括將方法和欄位新增到現有類別，以及變更現有的函數。不過，有幾種類型的程式碼變更無法熱重載。

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

對於這些變更，您可以完全重新啟動應用程式，而無需結束除錯階段。若要執行熱重新啟動，請勿點擊「停止」按鈕，只需重新點擊「執行」按鈕（如果在執行階段）或「除錯」按鈕（如果在除錯階段），或按住 Shift 鍵點擊「熱重載」按鈕即可。

在 Android Studio 中使用完整的 IDE 支援編輯 Android 程式碼

#

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

如果您已在 Android Studio 中將整個專案作為 Flutter 應用程式開啟，則有兩種等效的方法可以在 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 專案時，您可能會看到 Android Studio 報告建置錯誤。在應用程式的根目錄中執行 flutter pub get，然後選取「建置 > 建置」以重建專案來修正此錯誤。

在 IntelliJ IDEA 中編輯 Android 程式碼

#

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

  1. 在「偏好設定 > 外掛程式」中，啟用「Android 支援」（如果尚未啟用）。
  2. 在「專案」檢視中右鍵點擊 android 資料夾，然後選取「開啟模組設定」。
  3. 在「來源」標籤中，找到「語言層級」欄位，然後選取層級 8 或更高版本。
  4. 在「相依性」標籤中，找到「模組 SDK」欄位，然後選取 Android SDK。如果未列出任何 SDK，請點擊「新增」並指定 Android SDK 的位置。請務必選取與 Flutter 使用的 Android SDK 相符的 SDK（如 flutter doctor 報告）。
  5. 點擊「確定」。

疑難排解

#

已知問題與意見回饋

#

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

所有已知錯誤都會在問題追蹤器中追蹤

我們歡迎關於錯誤/問題和功能請求的回饋。在提交新問題之前

  • 請在問題追蹤器中快速搜尋，查看該問題是否已在追蹤中。
  • 請確保您已更新到最新版本的外掛程式。

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

除非另有說明，本網站上的文件皆反映 Flutter 的最新穩定版本。頁面最後更新日期：2024-04-04。 檢視原始碼 或 回報問題。