目錄
description bug_report

在 Android Studio 或 IntelliJ 裡開發 Flutter 應用

目錄

安裝和設定

按照 編輯工具設定，安裝 Dart 和 Flutter 外掛。

更新外掛

更新外掛

外掛的更新會定期發布，當有更新可用時，你會在 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，或者主視窗中的

  2. 指定 Flutter SDK path，點選 Next。

  3. 輸入你想要的 Project name，Description 和 Project location。

  4. 如果打算發布此應用，需要 設定公司網域名稱。

  5. 點選 Finish。

在 IntelliJ 中：

  1. 在 IDE 中，點選 Welcome 視窗中的 New Project，或者主視窗中的 File > New > Project。

  2. 在左側面板的 Generators 清單中選擇 Flutter。

  3. 指定 Flutter SDK path，點選 Next。

  4. 輸入你想要的 Project name，Description

  5. 如果打算發布此應用，需要 設定公司網域名稱。

  6. 點選 Finish。

從現有原始碼建立新專案

開啟現有的 Flutter 專案：

  1. 在 IDE 中，點選 Welcome 視窗中的 Open，或者主視窗中的 File > Open。

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

  3. 點選 Open。

編輯程式碼，和檢視問題

Dart 外掛的程式碼分析，可以做到：

  • 語法高亮顯示。

  • 基於多種型別分析的程式碼補全。

  • 定位到型別的宣告（Navigate > Declaration），查詢型別的引用（Edit > Find > Find Usages）。

  • 檢視當前存在的程式碼問題（View > Tool Windows > Dart Analysis），所有問題會在 Dart Analysis 視窗中顯示
    Dart Analysis 視窗

執行和除錯

在主工具欄，可以執行和除錯程式碼：

Main IntelliJ toolbar

選擇目標裝置

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

  1. 找到選擇目標下拉按鈕，點選它會顯示出可用裝置清單。

  2. 選擇你希望啟動應用的裝置。當連線裝置或啟動模擬器時，清單中將會加入新選項。

不使用斷點執行應用

  1. 點選工具欄中的 Play 按鈕，或選擇 Run > Run。底部的 Run 視窗會有日誌輸出：

使用斷點執行應用

  1. 如果需要，在原始碼中設定斷點。

  2. 點選工具欄中的 Debug 按鈕，或選擇 Run > Debug。

    • 底部的 Debugger 視窗會顯示出堆疊和變數訊息。

    • 底部的 Console 視窗會顯示詳細的日誌輸出。

    • 除錯基於預設的啟動設定，如果需要自定義，點選選擇目標下拉按鈕，選擇 Edit configuration 進行設定。

快速編輯和檢視效果

Flutter 有效加快開發週期。使用 熱過載 功能，你可以在修改原始碼後，幾乎馬上看到效果。詳細訊息請查閱 使用熱過載。

顯示效能資料

在 Debug 模式下啟動應用後，使用 View > Tool Windows > Flutter Performance 開啟效能工具視窗，以檢視效能資料以及 widget 的 rebuild 訊息。

Flutter performance window

點選 Performance 視窗中的 Show widget rebuild information，檢視正在過載的 widget 統計訊息和過載頻率。右邊第二列顯示了所在框架的過載次數。如果過載次數過多，會顯示一個黃色旋轉圓圈。最右一列顯示了進入當前頁面後 widget 的過載次數。對於未過載的小部件，將顯示一個灰色圓圈，否則將顯示一個灰色旋轉圓圈。

該功能的目的是讓你瞭解 widget 是何時過載的，只看程式碼的話可能不好發現。如果 widget 在你預想不到的情況下發生了過載，說明你可能需要重構程式碼，將大型的建立方法拆分成多個 widget。

該工具可以幫助你除錯至少四個常見的效能問題：

  1. 整個螢幕（或大部分螢幕）由一個 StatefulWidget 構成，導致不必要的 UI 建立。可將 UI 拆分成多個具有較輕量 build() 方法的 widget。

  2. 未在螢幕上顯示的 widget 發生了過載。例如，一個延伸到螢幕外的 ListView，或者未給延伸到螢幕外的清單設定 RepaintBoundary，會導致重繪整個清單。

  3. AnimatedBuilder 的 build() 方法繪製了一個不需要動畫的子樹，導致不必要的靜態物件過載。

  4. 一個 Opacity widget 在 widget tree 中使用了一個不必要的高度，或者透過直接操作 Opacity widget 的透明屬性建立 Opacity 動畫，導致 widget 和它的子樹過載。

你可以點選表格中的一行，定位到建立指定 widget 的原始碼位置。隨著程式碼的執行，旋轉圖示也會在程式碼視窗中顯示，以幫助你觀察正在進行的過載。

大量的過載並不一定表示存在問題。通常情況下，只有當你透過分析發現效能不理想時，才需要考慮過度過載的問題。

記住，widget 的過載訊息只在 debug 版本中可用，在真機上使用分析建立 (profile build) 進行應用效能分析，使用除錯建立 (debug build) 進行效能問題除錯。

Flutter 程式碼編輯提示

如果你有其他我們應該提供的程式碼提示建議，請 告訴我們!

程式碼輔助和快速修復

程式碼輔助功能是特定程式碼識別符號相關的程式碼修改。當游標放在 Flutter widget 上時，黃色燈泡圖示會指示可用的修改，可以透過點選燈泡進行修改，或使用鍵盤快捷鍵（在 Linux 和 Windows 上使用 Alt+Enter，在 macOS 上使用 Option+Return），如下圖所示：

IntelliJ editing assists

Quick Fixes 快速修復功能也是類似的，當一段程式碼存在錯誤時，它會出現並幫助糾正錯誤。它使用紅色燈泡表示。

Widget 巢狀輔助

當你有一個 widget 需要巢狀在其他 widget 時，可以使用該功能。例如，需要將 widget 巢狀在 Row 或 Column 中。

Widget 清單巢狀輔助

和上面的輔助類別似，但它巢狀的是一個 widget 的清單，而不是單個的 widget。

child 和 children 轉換輔助

將 child 轉換成 children，並且把引數值寫進一個 list。

實時樣板

實時樣板用於增加典型程式碼結構的輸入速度。輸入字首後，在程式碼完成視窗中選擇它：

IntelliJ live templates

Flutter 外掛包含了以下樣板：

  • 字首 stless：建立一個 StatelessWidget 的子類別。

  • 字首 stful：建立一個 StatefulWidget 的子類別，並關聯 State 子類別。

  • 字首 stanim：建立一個 StatefulWidget 的子類別，並關聯 State 子類別，包含一個 AnimationController 的初始化欄位。

你還可以透過 Settings > Editor > Live Templates 定義自定義樣板。

鍵盤快捷鍵

熱過載

在 Linux（對映方案預設為 XWin）和 Windows 上，快捷鍵是 Control+Alt+; 和 Control+Backslash。

在 macOS 上（對映方案 Mac OS X 10.5+）上，快捷鍵是 Command+Option 和 Command+Backslash。

可以在 IDE 的設定中修改快捷鍵：選擇 Keymap 後，在右上角的搜尋框輸入 flutter。右鍵點選你想修改的快捷鍵，點選 Add Keyboard Shortcut

IntelliJ settings keymap

熱過載和熱重啟

熱過載的工作原理是將更新後的程式碼注入 Dart VM（虛擬機）。不僅包括新增新類，還包括新增方法和欄位到已有的類別中。但有些型別的程式碼是無法被熱過載的：

  • 全部變數的初始化

  • 靜態變數的初始化

  • 應用的 main() 方法

對於這些更改，你無需結束除錯過程而直接熱重啟 (hot restart) 你的應用：不要點選 Stop 按鈕，只需點選 Run 按鈕（在執行中），或 Debug 按鈕（在除錯中），或者按住 Shift 鍵點選熱過載按鈕。

在 Android Studio 中編輯 Android 程式碼，並獲得完整 IDE 支援

開啟 Flutter 專案的根目錄，並不會在 IDE 中顯示所有的 Android 檔案。 Flutter 應用套件含了一個名為 android 的子目錄，如果你在 Android Studio 中將該目錄作為單獨的專案開啟，則 IDE 將可以完全支援編輯和重構所有的 Android 檔案（比如 Gradle 指令碼檔案）。

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

  • 在『專案檢視 (project view)』中，你可以在 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 程式碼

要在 IntelliJ IDEA 中編輯 Android 程式碼，你需要設定 Android SDK 的位置：

  1. 在 Preferences > Plugins 中，啟用 Android Support。

  2. 在專案檢視中，右鍵點選 android 資料夾，然後選擇 Open Module Settings。

  3. 在 Sources 選項中，找到 Language level，並選擇 level 8 或更高階別。

  4. 在 Dependencies 選項中，找到 Module SDK，並選擇一個 Android SDK。如果這裡沒有列出 SDK，點選 New 並指定 Android SDK 的位置。確保選擇和 Flutter 使用相對應的 Android SDK（如 flutter doctor 中所示）。

  5. 點選 OK。

提示和技巧

故障排除

已知問題和反饋

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

所有已知問題都會在問題跟蹤器中進行跟蹤：

我們歡迎所有的錯誤、問題以及功能反饋。在送出新問題前：

  • 在問題跟蹤器總快速搜尋檢視問題是否已存在。

  • 確保你已經 更新 最新版本的外掛。

當你在送出新的 issue 時，確保帶上執行了 flutter doctor 指令之後的回傳內容。