Contents

在 Android Studio 或 IntelliJ 裡開發 Flutter 應用

Contents

安裝和設定

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

更新外掛

外掛的更新會定期釋出，當有更新可用時，你會在 IDE 中收到提示。

手動檢查更新：

  1. 開啟設定（在 macOS 中點選 Android Studio > Check for Updates，在 Linux 中點選 Help > Check for Updates）。

  2. 如果存在 dart 或 flutter，更新他們。

建立專案

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

建立新專案

使用 Futter 應用範本建立新的 Flutter 專案：

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

  2. 在選單中選擇 Flutter SDK path，點選 Next。

  3. 輸入你的 Project name、Description 和 Project location。

  4. 如果打算釋出此應用，需要 設定公司域名。

  5. 點選 Finish。

從現有原始碼建立新專案

建立包含現有 Flutter 原始碼的新 Flutter 專案：

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

  2. 在選單中選擇 Flutter，點選 Next。

  3. 在 Project location 下，輸入或選擇現有 Flutter 原始碼的檔案目錄。

  4. 點選 Finish。

編輯程式碼，和檢視問題

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 巢狀(Nesting)輔助

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

Widget 列表巢狀(Nesting)輔助

和上面的輔助類似，但它巢狀(Nesting)的是一個 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 命令之後的返回內容。