Flutter 使用(yòng) Flutter IDE

安裝和(hé)設置

請(qǐng)按照編輯器設置說明(míng)安裝Dart和(hé)Flutter插件。

Updating the plugins

對(duì)插件的更新将定期發布。當更新可用(yòng)時(shí)，您在IntelliJ中會(huì)收到(dào)提示。

手動檢查更新:

打開(kāi) preferences (IntelliJ IDEA>Check for Updates… on macOS, Help>Check for Updates… on Linux).

如果有 dart 後者flutter被列出, 更新它們.

創建項目

創建一個新項目

從(cóng)Flutter入門(mén)應用(yòng)程序模闆創建一個新的Flutter IntelliJ項目：

在IntelliJ中，在 ‘Welcome’ 窗口點擊 Create New Project 或者在主界面 File>New>Project…

在菜單中選擇 Flutter , 然後點擊 Next.

輸入Project name 和(hé) Project location

點擊 Finish.

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

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

在IntelliJ中， 在’Welcome’窗口點擊Create New Project 或者在主界面File>New>Project…注意： 不要使用(yòng)New>Project from existing sources… 選項來(lái)創建.

在菜單中選擇 Flutter ， 然後點擊 Next.

在 Project location 中輸入，或者浏覽選擇現(xiàn)有的Flutter源代碼文(wén)件目錄

點擊 Finish.

編輯代碼和(hé)查看(kàn)代碼問題

Dart插件執行代碼分析，可以：

語法高(gāo)亮(liàng)顯示.

基于豐富類型分析的代碼補全.

導航到(dào)類型聲明(míng) (Navigate>Declaration), 查找類型使用(yòng)的地方 (Edit>Find>Find Usages).

查看(kàn)當前源代碼的所有問題 (View>Tool Windows>Dart Analysis). 任何分析問題将在Analysis pane窗口中顯示:Dart Analysis pane

運行和(hé)調試

運行和(hé)調試由主工(gōng)具欄控制：

Main IntelliJ toolbar

選擇一個target

在IntelliJ中打開(kāi)一個Flutter項目時(shí)，您應該在工(gōng)具欄的右側看(kàn)到(dào)一組Flutter特定的按鈕。

注意: 如果Run＆Debug按鈕被禁用(yòng)，并且沒有列出任何target，則Flutter沒有發現(xiàn)任何連接的iOS或Android設備或模拟器。您需要連接設備或啓動模拟器才能(néng)繼續。

點擊 Flutter Target Selector 下(xià)拉按鈕，這(zhè)将顯示可用(yòng)的設備列表，選擇你(nǐ)想讓你(nǐ)的應用(yòng)運行的設備. 當您連接新的設備或啓動新的模拟器時(shí)，裏面會(huì)添加新的選項

無斷點運行

點擊 運行圖标，或者調用(yòng) Run>Run。底部的 Run 窗格中将會(huì)顯示日志輸出 Log pane

有斷點運行

如果需要，可在源代碼中設置斷點.

點擊工(gōng)具欄的 調試圖标，或者調用(yòng) Run>Debug。底部的 window 窗口将顯示調用(yòng)棧和(hé)變量.底部的 Console 窗口将顯示詳細的日志輸出.調試基于默認的啓動配置。要自(zì)定義這(zhè)個，點擊設備選擇器右側的下(xià)拉按鈕，然後選擇 Edit configuration

快(kuài)速編輯和(hé)加快(kuài)開(kāi)發周期

Flutter提供了(le)快(kuài)速的的開(kāi)發周期循壞，使您能(néng)夠通過“熱重新”功能(néng)在源碼發生改變後幾乎立即看(kàn)到(dào)變更的效果。有關詳細信息，請(qǐng)參閱熱重載Flutter應用(yòng)程序。

高(gāo)級調試

調試可視(shì)化布局問題

要調試UI問題，請(qǐng)使用(yòng)“Debug”啓動應用(yòng)程序，然後使用(yòng)’View > Tool Windows > Flutter Inspector’打開(kāi)Flutter檢查器工(gōng)具窗口。

IntelliJ Flutter Inspector Window

這(zhè)提供了(le)許多調試工(gōng)具; 有關這(zhè)些(xiē)詳細信息，請(qǐng)參閱調試Flutter Apps

‘切換 Select Widget 模式’: 在設備上(shàng)選擇一個widget以在Flutter Inspector中對(duì)其進行檢查。

‘切換 Debug Paint’: 顯示Widget布局邊界（包括邊框、padding、對(duì)齊等）

‘切換 Platform’: 在Android或iOS渲染之間切換.

‘切換 Performance Overlay’: 顯示GPU和(hé)CPU線程的性能(néng)圖.

‘打開(kāi) Timeline 窗口’: 分析應用(yòng)程序運行時(shí)的活動.

‘打開(kāi) Observatory’: Dart應用(yòng)程序的分析器.

菜單中還有一些(xiē)其他(tā)操作(zuò)：

‘Show Paint Baselines’: 使每個RenderBox顯示其基線

‘Enable Repaint Rainbow’: 重繪時(shí)在層上(shàng)顯示旋轉顔色.

‘Enable Slow Animations’: 減慢動畫(huà)以方便觀察.

‘Hide Slow Mode Banner’: 使在運行調試版本時(shí)隐藏’slow mode’橫幅

Debugging with Observatory

Observatory 是一個附帶的基于HTML的用(yòng)戶界面的調試和(hé)分析工(gōng)具. 詳情請(qǐng)參考 Observatory page.

打開(kāi) Observatory:

以調試模式運行您的應用(yòng)程序.

在Debug面闆中選擇’open observatory’ (見下(xià)面截圖), 點擊秒表⏱圖标 (‘Open Observatory’).

Debugging panel

Flutter代碼提示

輔助 & 快(kuài)速修正

輔助是與特定代碼标識符相關的代碼更改。當光标放(fàng)置在Flutter Widget标識符上(shàng)時(shí)，可以使用(yòng)其中的一些(xiē)标識符，如黃色燈泡圖标所示。 可以通過單擊燈泡或使用(yòng)鍵盤快(kuài)捷Alt-Enter來(lái)調用(yòng)該輔助功能(néng)，如下(xià)所示：

IntelliJ editing assists

快(kuài)速修正是類似的，隻有顯示一段有錯誤的代碼時(shí)，他(tā)們可以幫助您糾正它。它用(yòng)一個紅(hóng)色燈泡表示。

輔助菜單中的幾個功能(néng)：

用(yòng)新的widget包裝當前widget

這(zhè)可以在您想要包裝光标周圍的widget時(shí)使用(yòng)，例如，如果要将widget包裝在一個Row或中Column。

用(yòng)新的widget包裝widget list

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

将 child 轉爲 children

将child參數更改爲children，并将參數值包裝在列表中

實時(shí)模闆

實時(shí)模闆可用(yòng)于加速輸入常用(yòng)的代碼結構塊。通過輸入他(tā)們的’前綴’來(lái)調用(yòng)它們，然後在代碼補全窗口中選擇它們：

IntelliJ live templates

Flutter插件包含以下(xià)模闆:

前綴stless: 創建一個StatelessWidget的子類.

前綴stful: 創建一個StatefulWidget子類并且關聯到(dào)一個State子類.

前綴stanim: 創建一個StatefulWidget子類, 并且它關聯的State子類包括一個 AnimationController

您還可以在 Settings > Editor > Live Templates 中自(zì)定義模闆。

IntelliJ鍵盤快(kuài)捷鍵

熱重載（Hot Reload）

在Linux上(shàng)（IntelliJ鍵盤映射默認爲XWin）和(hé)Windows鍵盤快(kuài)捷鍵是ctrl-alt-;和(hé)ctrl-\。

在macOS上(shàng)（IntelliJ鍵盤映射Mac OS X 10.5+ copy），鍵盤快(kuài)捷鍵是⌘-⌥-; 和(hé)⌘-\。

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

IntelliJ Settings Keymap

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

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

全局變量初始化器.

靜态字段初始化器.

app的main()方法.

對(duì)于這(zhè)些(xiē)更改，您可以完全重新啓動應用(yòng)程序，而無需結束調試會(huì)話(huà)：

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

在IntelliJ IDEA中編輯Android代碼

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

在Preferences->Plugins中, 啓用(yòng) Android Support （如果你(nǐ)還沒有啓用(yòng)）.

右鍵單擊項目視(shì)圖中的android文(wén)件夾，然後選擇Open Module Settings。

在 Sources 選項卡中, 找到(dào) Language level 字段, 然後選擇 ‘8’或更高(gāo)級别

In Dependencies tab, locate the Module SDK field, and select an

在Dependencies選項卡中，找到(dào)Module SDK字段，然後選擇一個Android SDK。如果沒有列出SDK，請(qǐng)單擊New…并指定Android SDK的位置。 請(qǐng)确保選擇與Flutter使用(yòng)的Android SDK相匹配的Android SDK（如flutter doctor所提示的）。

點擊OK.

提示和(hé)技巧

請(qǐng)查看(kàn)這(zhè)些(xiē)’cheat sheets’:

Flutter IntelliJ cheat sheet, MacOS version

Flutter IntelliJ cheat sheet, Windows & Linux version

故障排除

已知(zhī)問題和(hé)反饋

Flutter plugin README文(wén)件中記錄了(le)可能(néng)影響您的體驗的重要已知(zhī)問題 。

所有已知(zhī)的錯誤都會(huì)持續跟蹤：

Flutter 插件: GitHub issue 跟蹤.

Dart 插件: JetBrains YouTrack.

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

在問題跟蹤中快(kuài)速搜索以查看(kàn)該問題是否已被跟蹤

确保你(nǐ)已經 更新 到(dào)了(le)最新版本的插件

提交新issue時(shí)，請(qǐng)包括flutter doctor的輸出