使用 Flutter IDE
编辑教程使用 Flutter IDE
安装和设置
请按照编辑器设置说明安装Dart和Flutter插件。
Updating the plugins
对插件的更新将定期发布。当更新可用时，您在IntelliJ中会收到提示。
手动检查更新:
| 打开 preferences (IntelliJ IDEA>Check for Updates… on macOS, Help>Check for Updates… on Linux). | |
|---|---|
| 如果有 dart 后者flutter被列出, 更新它们. |
创建项目
创建一个新项目
从Flutter入门应用程序模板创建一个新的Flutter IntelliJ项目：
| 在IntelliJ中，在 ‘Welcome’ 窗口点击 Create New Project 或者在主界面 File>New>Project… | |
|---|---|
| 在菜单中选择 Flutter , 然后点击 Next. | |
| 输入Project name 和 Project location | |
| 点击 Finish. |
从现有的源代码创建一个新的项目
创建一个包含现有Flutter源代码文件的新Flutter IntelliJ项目：
| 在IntelliJ中， 在’Welcome’窗口点击Create New Project 或者在主界面File>New>Project…注意： 不要使用New>Project from existing sources… 选项来创建. | |
|---|---|
| 在菜单中选择 Flutter ， 然后点击 Next. | |
| 在 Project location 中输入，或者浏览选择现有的Flutter源代码文件目录 | |
| 点击 Finish. |
编辑代码和查看代码问题
Dart插件执行代码分析，可以：
| 语法高亮显示. | |
|---|---|
| 基于丰富类型分析的代码补全. | |
| 导航到类型声明 (Navigate>Declaration), 查找类型使用的地方 (Edit>Find>Find Usages). | |
查看当前源代码的所有问题 (View>Tool Windows>Dart Analysis). 任何分析问题将在Analysis pane窗口中显示:  |
运行和调试
运行和调试由主工具栏控制：
选择一个target
在IntelliJ中打开一个Flutter项目时，您应该在工具栏的右侧看到一组Flutter特定的按钮。
注意: 如果Run＆Debug按钮被禁用，并且没有列出任何target，则Flutter没有发现任何连接的iOS或Android设备或模拟器。您需要连接设备或启动模拟器才能继续。
点击 Flutter Target Selector 下拉按钮，这将显示可用的设备列表，选择你想让你的应用运行的设备. 当您连接新的设备或启动新的模拟器时，里面会添加新的选项
无断点运行
点击 运行图标，或者调用 Run>Run。底部的 Run 窗格中将会显示日志输出 Log pane
有断点运行
| 如果需要，可在源代码中设置断点. | |
|---|---|
| 点击工具栏的 调试图标，或者调用 Run>Debug。底部的 Debugger 窗口将显示调用栈和变量.底部的 Console 窗口将显示详细的日志输出.调试基于默认的启动配置。要自定义这个，点击设备选择器右侧的下拉按钮，然后选择 Edit configuration |
快速编辑和加快开发周期
Flutter提供了快速的的开发周期循坏，使您能够通过“热重新”功能在源码发生改变后几乎立即看到变更的效果。有关详细信息，请参阅热重载Flutter应用程序。
高级调试
调试可视化布局问题
要调试UI问题，请使用“Debug”启动应用程序，然后使用’View > Tool Windows > Flutter Inspector’打开Flutter检查器工具窗口。
这提供了许多调试工具; 有关这些详细信息，请参阅调试Flutter Apps
| ‘切换 Select Widget 模式’: 在设备上选择一个widget以在Flutter Inspector中对其进行检查。 | |
|---|---|
| ‘切换 Debug Paint’: 显示Widget布局边界（包括边框、padding、对齐等） | |
| ‘切换 Platform’: 在Android或iOS渲染之间切换. | |
| ‘切换 Performance Overlay’: 显示GPU和CPU线程的性能图. | |
| ‘打开 Timeline 窗口’: 分析应用程序运行时的活动. | |
| ‘打开 Observatory’: Dart应用程序的分析器. |
菜单中还有一些其他操作：
| ‘Show Paint Baselines’: 使每个RenderBox显示其基线 | |
|---|---|
| ‘Enable Repaint Rainbow’: 重绘时在层上显示旋转颜色. | |
| ‘Enable Slow Animations’: 减慢动画以方便观察. | |
| ‘Hide Slow Mode Banner’: 使在运行调试版本时隐藏’slow mode’横幅 |
Debugging with Observatory
Observatory 是一个附带的基于HTML的用户界面的调试和分析工具. 详情请参考 Observatory page.
打开 Observatory:
以调试模式运行您的应用程序.
在Debug面板中选择’open observatory’ (见下面截图), 点击秒表⏱图标 (‘Open Observatory’).
Flutter代码提示
辅助 & 快速修正
辅助是与特定代码标识符相关的代码更改。当光标放置在Flutter Widget标识符上时，可以使用其中的一些标识符，如黄色灯泡图标所示。 可以通过单击灯泡或使用键盘快捷Alt-Enter来调用该辅助功能，如下所示：
快速修正是类似的，只有显示一段有错误的代码时，他们可以帮助您纠正它。它用一个红色灯泡表示。
辅助菜单中的几个功能：
| 用新的widget包装当前widget | 这可以在您想要包装光标周围的widget时使用，例如，如果要将widget包装在一个Row或中Column。 |
|---|---|
| 用新的widget包装widget list | 类似于上一条，但是用于包装现有widget 列表而不是单个widget。 |
| 将 child 转为 children | 将child参数更改为children，并将参数值包装在列表中 |
实时模板
实时模板可用于加速输入常用的代码结构块。通过输入他们的’前缀’来调用它们，然后在代码补全窗口中选择它们：
Flutter插件包含以下模板:
| 前缀stless: 创建一个StatelessWidget的子类. | |
|---|---|
| 前缀stful: 创建一个StatefulWidget子类并且关联到一个State子类. | |
| 前缀stanim: 创建一个StatefulWidget子类, 并且它关联的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（虚拟机）中工作。这不仅包括添加新类，还包括向现有类添加方法和字段以及更改现有函数。尽管有几种类型的代码更改无法热重载：
| 全局变量初始化器. | |
|---|---|
| 静态字段初始化器. | |
| app的main()方法. |
对于这些更改，您可以完全重新启动应用程序，而无需结束调试会话：
不要点击停止按钮; 只需重新单击运行按钮（如果在运行会话中）或调试按钮（如果在调试会话中），或者按住Shift键并单击“热重载”按钮
在IntelliJ IDEA中编辑Android代码
要在IntelliJ IDEA中编辑Android代码，您需要配置Android SDK的位置：
| 在Preferences->Plugins中, 启用 Android Support （如果你还没有启用）. | |
|---|---|
| 右键单击项目视图中的android文件夹，然后选择Open Module Settings。 | |
| 在 Sources 选项卡中, 找到 Language level 字段, 然后选择 ‘8’或更高级别 | |
| In Dependencies tab, locate the Module SDK field, and select an | |
| 在Dependencies选项卡中，找到Module SDK字段，然后选择一个Android SDK。如果没有列出SDK，请单击New…并指定Android SDK的位置。 请确保选择与Flutter使用的Android SDK相匹配的Android SDK（如flutter doctor所提示的）。 | |
| 点击OK. |
提示和技巧
请查看这些’cheat sheets’:
| Flutter IntelliJ cheat sheet, MacOS version | |
|---|---|
| Flutter IntelliJ cheat sheet, Windows & Linux version |
故障排除
已知问题和反馈
Flutter plugin README文件中记录了可能影响您的体验的重要已知问题 。
所有已知的错误都会持续跟踪：
| Flutter 插件: GitHub issue 跟踪. | |
|---|---|
| Dart 插件: JetBrains YouTrack. |
我们非常欢迎有关错误/问题和功能请求的反馈。在提交新问题之前，请：
| 在问题跟踪中快速搜索以查看该问题是否已被跟踪 | |
|---|---|
| 确保你已经 更新 到了最新版本的插件 |
提交新issue时，请包括flutter doctor的输出
选择支付方式：
备注：
转账时请填写正确的金额和备注信息，到账由人工处理，可能需要较长时间