Flutter 使用 Flutter IDE

安裝和(hé)設置

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

Updating the plugins

對插件的更新将定期發布。當更新可(kě)用時(shí)，您在IntelliJ中會收到提示。

手動檢查更新:

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

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

創建項目

創建一(yī)個新項目

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

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

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

輸入Project name 和(hé) Project location

點擊 Finish.

從(cóng)現有的源代碼創建一(yī)個新的項目

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

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

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

在 Project location 中輸入，或者浏覽選擇現有的Flutter源代碼文件目錄

點擊 Finish.

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

Dart插件執行(xíng)代碼分析，可(kě)以：

語法高亮顯示.

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

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

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

運行(xíng)和(hé)調試

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

Main IntelliJ toolbar

選擇一(yī)個target

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

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

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

無斷點運行(xíng)

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

有斷點運行(xíng)

如(rú)果需要(yào)，可(kě)在源代碼中設置斷點.

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

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

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

高級調試

調試可(kě)視(shì)化布局問(wèn)題

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

IntelliJ Flutter Inspector Window

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

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

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

‘切換 Platform’: 在Android或iOS渲染之間(jiān)切換.

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

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

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

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

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

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

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

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

Debugging with Observatory

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

打開(kāi) Observatory:

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

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

Debugging panel

Flutter代碼提示

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

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

IntelliJ editing assists

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

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

用新的widget包裝當前widget

這(zhè)可(kě)以在您想要(yào)包裝光(guāng)标周圍的widget時(shí)使用，例如(rú)，如(rú)果要(yào)将widget包裝在一(yī)個Row或中Column。

用新的widget包裝widget list

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

将 child 轉為(wèi) children

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

實時(shí)模闆

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

IntelliJ live templates

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

前綴stless: 創建一(yī)個StatelessWidget的子類.

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

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

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

IntelliJ鍵盤快(kuài)捷鍵

熱(rè)重載（Hot Reload）

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

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

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

IntelliJ Settings Keymap

‘熱(rè)重載’ vs ‘完全重啓’

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

全局變量初始化器.

靜态字段初始化器.

app的main()方法.

對于這(zhè)些更改，您可(kě)以完全重新啓動應用程序，而無需結束調試會話：

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

在IntelliJ IDEA中編輯Android代碼

要(yào)在IntelliJ IDEA中編輯Android代碼，您需要(yào)配置Android SDK的位置：

在Preferences->Plugins中, 啓用 Android Support （如(rú)果你還沒有啓用）.

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

在 Sources 選項卡中, 找到 Language level 字段, 然後選擇 ‘8’或更高級别

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

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

點擊OK.

提示和(hé)技巧

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

Flutter IntelliJ cheat sheet, MacOS version

Flutter IntelliJ cheat sheet, Windows & Linux version

故障排除

已知問(wèn)題和(hé)反饋

Flutter plugin README文件中記錄了(le)可(kě)能(néng)影響您的體驗的重要(yào)已知問(wèn)題 。

所有已知的錯誤都(dōu)會持續跟蹤：

Flutter 插件: GitHub issue 跟蹤.

Dart 插件: JetBrains YouTrack.

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

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

确保你已經 更新 到了(le)最新版本的插件

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