Flutter 開發(fā)和工具

安裝和設(shè)置

請按照編輯器設(shè)置說明安裝Dart和Flutter插件。

Updating the plugins

對插件的更新將定期發(fā)布。當更新可用時，您在IntelliJ中會收到提示。

手動檢查更新:

1. 打開 preferences (IntelliJ IDEA>Check for Updates… on macOS, Help>Check for Updates… on Linux).
2. 如果有 dart 后者flutter被列出, 更新它們.

創(chuàng)建項目

創(chuàng)建一個新項目

從Flutter入門應(yīng)用程序模板創(chuàng)建一個新的Flutter IntelliJ項目：

1. 在IntelliJ中，在 ‘Welcome’ 窗口點擊 Create New Project 或者在主界面 File>New>Project…
2. 在菜單中選擇 Flutter , 然后點擊 Next.
3. 輸入Project name 和 Project location
4. 點擊 Finish.

從現(xiàn)有的源代碼創(chuàng)建一個新的項目

To create a new Flutter IntelliJ project containing existing Flutter source code files: 創(chuàng)建一個包含現(xiàn)有Flutter源代碼文件的新Flutter IntelliJ項目：

1. 在IntelliJ中， 在’Welcome’窗口點擊Create New Project 或者在主界面File>New>Project…注意： 不要使用New>Project from existing sources… 選項來創(chuàng)建.
2. 在菜單中選擇 Flutter ， 然后點擊 Next.
3. 在 Project location 中輸入，或者瀏覽選擇現(xiàn)有的Flutter源代碼文件目錄
4. 點擊 Finish.

編輯代碼和查看代碼問題

Dart插件執(zhí)行代碼分析，可以：

• 語法高亮顯示.
• 基于豐富類型分析的代碼補全.
• 導(dǎo)航到類型聲明 (Navigate>Declaration), 查找類型使用的地方 (Edit>Find>Find Usages).
• 查看當前源代碼的所有問題 (View>Tool Windows>Dart Analysis). 任何分析問題將在Analysis pane窗口中顯示:

運行和調(diào)試

運行和調(diào)試由主工具欄控制：

選擇一個target

在IntelliJ中打開一個Flutter項目時，您應(yīng)該在工具欄的右側(cè)看到一組Flutter特定的按鈕。

注意: 如果Run＆Debug按鈕被禁用，并且沒有列出任何target，則Flutter沒有發(fā)現(xiàn)任何連接的iOS或Android設(shè)備或模擬器。您需要連接設(shè)備或啟動模擬器才能繼續(xù)。

點擊 Flutter Target Selector 下拉按鈕，這將顯示可用的設(shè)備列表，選擇你想讓你的應(yīng)用運行的設(shè)備. 當您連接新的設(shè)備或啟動新的模擬器時，里面會添加新的選項

無斷點運行

點擊 運行圖標，或者調(diào)用 Run>Run。底部的 Run 窗格中將會顯示日志輸出 

有斷點運行

1. 如果需要，可在源代碼中設(shè)置斷點.
2. 點擊工具欄的 調(diào)試圖標，或者調(diào)用 Run>Debug。底部的 Debugger 窗口將顯示調(diào)用棧和變量.底部的 Console 窗口將顯示詳細的日志輸出.調(diào)試基于默認的啟動配置。要自定義這個，點擊設(shè)備選擇器右側(cè)的下拉按鈕，然后選擇 Edit configuration

快速編輯和加快開發(fā)周期

Flutter提供了快速的的開發(fā)周期循壞，使您能夠通過“熱重新”功能在源碼發(fā)生改變后幾乎立即看到變更的效果。有關(guān)詳細信息，請參閱熱重載Flutter應(yīng)用程序。

高級調(diào)試

調(diào)試可視化布局問題

要調(diào)試UI問題，請使用“Debug”啟動應(yīng)用程序，然后使用’View > Tool Windows > Flutter Inspector’打開Flutter檢查器工具窗口。

這提供了許多調(diào)試工具; 有關(guān)這些詳細信息，請參閱調(diào)試Flutter Apps

• ‘切換 Select Widget 模式’: 在設(shè)備上選擇一個widget以在Flutter Inspector中對其進行檢查。
• ‘切換 Debug Paint’: 顯示W(wǎng)idget布局邊界（包括邊框、padding、對齊等）
• ‘切換 Platform’: 在Android或iOS渲染之間切換.
• ‘切換 Performance Overlay’: 顯示GPU和CPU線程的性能圖.
• ‘打開 Timeline 窗口’: 分析應(yīng)用程序運行時的活動.
• ‘打開 Observatory’: Dart應(yīng)用程序的分析器.

菜單中還有一些其他操作：

• ‘Show Paint Baselines’: 使每個RenderBox顯示其基線
• ‘Enable Repaint Rainbow’: 重繪時在層上顯示旋轉(zhuǎn)顏色.
• ‘Enable Slow Animations’: 減慢動畫以方便觀察.
• ‘Hide Slow Mode Banner’: 使在運行調(diào)試版本時隱藏’slow mode’橫幅

Debugging with Observatory

Observatory 是一個附帶的基于HTML的用戶界面的調(diào)試和分析工具. 詳情請參考 Observatory page.

打開 Observatory:

1. 以調(diào)試模式運行您的應(yīng)用程序.
2. 在Debug面板中選擇’open observatory’ (見下面截圖), 點擊秒表?圖標 (‘Open Observatory’).

Flutter代碼提示

輔助 & 快速修正

輔助是與特定代碼標識符相關(guān)的代碼更改。當光標放置在Flutter Widget標識符上時，可以使用其中的一些標識符，如黃色燈泡圖標所示。 可以通過單擊燈泡或使用鍵盤快捷Alt-Enter來調(diào)用該輔助功能，如下所示：

快速修正是類似的，只有顯示一段有錯誤的代碼時，他們可以幫助您糾正它。它用一個紅色燈泡表示。

輔助菜單中的幾個功能：

用新的widget包裝當前widget

這可以在您想要包裝光標周圍的widget時使用，例如，如果要將widget包裝在一個Row或中Column。

用新的widget包裝widget list

類似于上一條，但是用于包裝現(xiàn)有widget 列表而不是單個widget。

將 child 轉(zhuǎn)為 children

將child參數(shù)更改為children，并將參數(shù)值包裝在列表中

實時模板

實時模板可用于加速輸入常用的代碼結(jié)構(gòu)塊。通過輸入他們的’前綴’來調(diào)用它們，然后在代碼補全窗口中選擇它們：

Flutter插件包含以下模板:

• 前綴stless: 創(chuàng)建一個StatelessWidget的子類.
• 前綴stful: 創(chuàng)建一個StatefulWidget子類并且關(guān)聯(lián)到一個State子類.
• 前綴stanim: 創(chuàng)建一個StatefulWidget子類, 并且它關(guān)聯(lián)的State子類包括一個 AnimationController

您還可以在 Settings > Editor > Live Templates 中自定義模板。

IntelliJ鍵盤快捷鍵

熱重載（Hot Reload）

在Linux上（IntelliJ鍵盤映射默認為XWin）和Windows鍵盤快捷鍵是ctrl-alt-;和ctrl-\。

在macOS上（IntelliJ鍵盤映射Mac OS X 10.5+ copy），鍵盤快捷鍵是?-?-; 和?-\。

鍵盤映射可以在IntelliJ Preferences/Settings進行更改：選擇Keymap，然后在右上角的搜索框中輸入”flutter”。右鍵單擊要更改的綁定并添加鍵盤快捷鍵

‘熱重載’ vs ‘完全重啟’

熱重載通過將更新的源代碼文件注入正在運行的Dart VM（虛擬機）中工作。這不僅包括添加新類，還包括向現(xiàn)有類添加方法和字段以及更改現(xiàn)有函數(shù)。盡管有幾種類型的代碼更改無法熱重載：

• 全局變量初始化器.
• 靜態(tài)字段初始化器.
• app的main()方法.

對于這些更改，您可以完全重新啟動應(yīng)用程序，而無需結(jié)束調(diào)試會話：

不要點擊停止按鈕; 只需重新單擊運行按鈕（如果在運行會話中）或調(diào)試按鈕（如果在調(diào)試會話中），或者按住Shift鍵并單擊“熱重載”按鈕

在IntelliJ IDEA中編輯Android代碼

要在IntelliJ IDEA中編輯Android代碼，您需要配置Android SDK的位置：

1. 在Preferences->Plugins中, 啟用 Android Support （如果你還沒有啟用）.
2. 右鍵單擊項目視圖中的android文件夾，然后選擇Open Module Settings。
3. 在 Sources 選項卡中, 找到 Language level 字段, 然后選擇 ‘8’或更高級別
4. In Dependencies tab, locate the Module SDK field, and select an
5. 在Dependencies選項卡中，找到Module SDK字段，然后選擇一個Android SDK。如果沒有列出SDK，請單擊New…并指定Android SDK的位置。 請確保選擇與Flutter使用的Android SDK相匹配的Android SDK（如flutter doctor所提示的）。
6. 點擊OK.

提示和技巧

請查看這些’cheat sheets’:

• Flutter IntelliJ cheat sheet, MacOS version
• Flutter IntelliJ cheat sheet, Windows & Linux version

故障排除

已知問題和反饋

Flutter plugin README文件中記錄了可能影響您的體驗的重要已知問題 。

所有已知的錯誤都會持續(xù)跟蹤：

• Flutter 插件: GitHub issue 跟蹤.
• Dart 插件: JetBrains YouTrack.

我們非常歡迎有關(guān)錯誤/問題和功能請求的反饋。在提交新問題之前，請：

• 在問題跟蹤中快速搜索以查看該問題是否已被跟蹤
• 確保你已經(jīng) 更新 到了最新版本的插件

提交新issue時，請包括flutter doctor的輸出