使用 Android Studio 進行 Flutter 開發

做者： SouthernBox

本文將與你一塊兒回顧如何在 Android Studio 裏進行 Flutter 工具的配置。

---

建立項目

你能夠經過多種方式來建立新項目。

建立新項目

使用 Futter 應用模板建立新的 Flutter 項目：

1. 在 IDE 中，點擊 Welcome 窗口，或者主窗口File > New > Project 中的Create New Project。
2. 在菜單中選擇 Flutter，點擊 Next。
3. 輸入你的 Project name 和 Project location。
4. 若是打算髮布此應用，須要 設置公司域名⚠️。
5. 點擊 Finish。

⚠️ 關於設置公司域名

「在建立新應用時，一些 Flutter IDE 插件須要一個逆序的域名，好比com.example。除了程序名外，在應用發佈後，它將做爲 Android 應用的包名，以及 iOS 應用的 Bundle ID。若是你可能發佈此應用，最好如今就指定好它，應用發佈後將沒法更改。你的域名應該是惟一的。」

從現有源碼建立新項目

建立包含現有 Flutter 源碼的新 Flutter 項目：

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

「對於 Flutter 項目，請  不要 使用  New > Project from existing sources。 」

1. 在菜單中選擇 Flutter，點擊 Next。
2. 在 Project location 下，輸入或選擇現有 Flutter 源碼的文件目錄。
3. 點擊 Finish。

編輯代碼，和查看問題

Dart 插件的代碼分析，能夠作到：

• 語法高亮顯示。
• 基於多種類型分析的代碼補全。
• 定位到類型的聲明（Navigate > Declaration）， 查找類型的引用（Edit > Find > Find Usages）。
• 查看當前存在的代碼問題（View > Tool Windows > Dart Analysis）， 全部問題會在 Dart Analysis 窗口中顯示

運行和調試

你能夠經過以下方式調試你的應用：

• 使用 開發者工具 (DevTools), 運行在瀏覽器裏的一系列調試和分析工具，也包括 Flutter inspector，開發者工具替代了以前的 Observatory 分析工具。
• 使用 Android Studio（或者 IntelliJ）內置的調試功能， 好比設置斷點等。
• 使用 Flutter inspector, 在 Android Studio 和 IntelliJ 內置。

下面的介紹文章適用於 Android Studio 和 IntelliJ，更多關於開發者工具的信息， 請參看文檔：在 Android Studio 上安裝和運行開發者工具。

在主工具欄，能夠運行和調試代碼：

選擇目標設備

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

「若是 Run 和 Debug 按鈕不可用且未顯示目標設備，則意味着 Flutter 未發現任何已鏈接的 iOS 、Android 設備或模擬器。你須要鏈接設備或啓動模擬器才能繼續。」

1. 找到選擇目標下拉按鈕，點擊它會顯示出可用設備列表。
2. 選擇你但願啓動應用的設備。當鏈接設備或啓動模擬器時， 列表中將會加入新選項。

「若是將你的 Flutter 應用運行在 Web 平臺，可是你無法找到  Chrome (web) 這個設備的話，請先確保你已經開啓了 Web 支持， 請在這個文檔裏查看更多：使用 Flutter 構建 Web 應用。」

不使用斷點運行應用

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

使用斷點運行應用

1. 若是須要，在源代碼中設置斷點。
2. 點擊工具欄中的 Debug 按鈕，或選擇 Run > Debug。

• 底ebugger 窗口會顯示出堆棧和變量信息。
• 底部的 Console 窗口會顯示詳細的日誌輸出。
• 調試基於默認的啓動配置，若是須要自定義，點擊選擇目標下拉按鈕，選擇 Edit configuration 進行配置。

快速編輯和查看效果

Flutter 有效加快開發週期。使用 熱重載 功能，你能夠在修改源碼後，幾乎立刻看到效果。詳細信息請查閱 使用熱重載。

顯示性能數據

「檢查 Flutter 裏的性能問題，請查看時間線視圖文檔。」

在 Debug 模式下啓動應用後，使用 View > Tool Windows > Flutter Performance打開性能工具窗口，以查看性能數據，以及 widget 的重載信息。

點擊 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）， 以下圖所示：

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

• Widget 嵌套輔助

當你有一個 widget 須要嵌套在其餘 widget 時，可使用該功能。例如，須要將 widget 嵌套在 Row 或 Column 中。

• Widget 列表嵌套輔助

和上面的輔助相似，但它嵌套的是一個 widget 的列表，而不是單個的 widget。

• child 和 children 轉換輔助

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

實時模板

實時模板用於增長典型代碼結構的輸入速度。輸入前綴後，在代碼完成窗口中選擇它：

Flutter 插件包含了如下模板：

• 前綴 stless：建立一個 StatelessWidget 的子類。
• 前綴 stful：建立一個 StatefulWidget 的子類，並關聯 State 子類。
• 前綴 stanim：建立一個 StatefulWidget 的子類，並關聯 State 子類，包含一個 AnimationController 的初始化字段。

你還能夠經過 Settings > Editor > Live Templates 定義自定義模板。

鍵盤快捷鍵

• 熱重載

在 Linux（映射方案默認爲 XWin）和 Windows 上， 快捷鍵是Controle+Alt+; 和 Control+Backslash。

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

能夠在 IDE 的設置中修改快捷鍵：選擇 Keymap 後， 在右上角的搜索框輸入flutter。右鍵點擊你想修改的快捷鍵，點擊 Add Keyboard Shortcut

• 熱重載和熱重啓

熱重載的工做原理是將更新後的代碼注入 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 插件。

• 在「項目視圖」中，你能夠在 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。

• • *

提示和技巧 PDF 下載

• Flutter IDE 速查表，MacOS 版
• Flutter IDE 速查表，Windows 和 Linux 版

故障排除

已知問題和反饋

Flutter 插件 README 文件中記錄了可能影響你使用體驗的已知重要問題。

全部已知問題都會在問題跟蹤器中進行跟蹤：

• Flutter 插件：GitHub 問題跟蹤
• Dart 插件: JetBrains 問題跟蹤

咱們歡迎全部的錯誤、問題以及功能反饋。在提交新問題前：

• 在問題跟蹤器總快速搜索查看問題是否已存在。
• 確保你已經更新到了最新版本的插件。

當你在提交新的 issue 時，確保帶上運行了 flutter doctor 命令以後的返回內容。

---

Android學習PDF+架構視頻+面試文檔+源碼筆記

最後

感謝你們能耐着性子，看完我囉哩囉嗦的文章。

願與各位堅守在Android開發崗位的同胞們互相交流學習，共同進步！

在這裏我也分享一份本身收錄整理的Android學習PDF+架構視頻+面試文檔+源碼筆記，還有高級架構技術進階腦圖、Android開發面試專題資料，高級進階架構資料幫助你們學習提高進階，也節省你們在網上搜索資料的時間來學習，也能夠分享給身邊好友一塊兒學習

若是你有須要的話，能夠點贊+評論