Skip to content

Latest commit

 

History

History
236 lines (142 loc) · 9.65 KB

using-ide.md

File metadata and controls

236 lines (142 loc) · 9.65 KB
Raw
layout title permalink summary keywords
page
在IDE中开发Flutter应用
/using-ide/
几款好用的Flutter IDE
Flutter IDE

Flutter插件在Android Studio或IntelliJ IDE中提供完全集成的开发体验。

  • TOC Placeholder {:toc}

安装和设置

请按照编辑器设置说明安装Dart和Flutter插件。

Updating the plugins

对插件的更新将定期发布。当更新可用时，您在IntelliJ中会收到提示。

手动检查更新:

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

创建项目

创建一个新项目

从Flutter入门应用程序模板创建一个新的Flutter IntelliJ项目：

  1. 在IntelliJ中，在 'Welcome' 窗口点击 Create New Project 或者在主界面 File>New>Project...
  2. 在菜单中选择 Flutter , 然后点击 Next.
  3. 输入Project name 和 Project location
  4. 点击 Finish.

从现有的源代码创建一个新的项目

To create a new Flutter IntelliJ project containing existing Flutter source code files: 创建一个包含现有Flutter源代码文件的新Flutter IntelliJ项目：

  1. 在IntelliJ中， 在'Welcome'窗口点击Create New Project 或者在主界面File>New>Project...
  • 注意： 不要使用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). 任何分析问题将在Analysis pane窗口中显示:
    Dart Analysis pane

运行和调试

运行和调试由主工具栏控制：

Main IntelliJ toolbar

选择一个target

在IntelliJ中打开一个Flutter项目时，您应该在工具栏的右侧看到一组Flutter特定的按钮。

**注意:** 如果Run＆Debug按钮被禁用，并且没有列出任何target，则Flutter没有发现任何连接的iOS或Android设备或模拟器。您需要连接设备或启动模拟器才能继续。
点击 **Flutter Target Selector** 下拉按钮，这将显示可用的设备列表，选择你想让你的应用运行的设备. 当您连接新的设备或启动新的模拟器时，里面会添加新的选项

无断点运行

点击 运行图标，或者调用 Run>Run。底部的 Run 窗格中将会显示日志输出
Log pane

有断点运行

  1. 如果需要，可在源代码中设置断点.
  2. 点击工具栏的 调试图标，或者调用 Run>Debug。
  • 底部的 Debugger 窗口将显示调用栈和变量.
  • 底部的 Console 窗口将显示详细的日志输出.
  • 调试基于默认的启动配置。要自定义这个，点击设备选择器右侧的下拉按钮，然后选择 Edit configuration

快速编辑和加快开发周期

Flutter提供了快速的的开发周期循坏，使您能够通过“热重新”功能在源码发生改变后几乎立即看到变更的效果。有关详细信息，请参阅热重载Flutter应用程序。

高级调试

调试可视化布局问题

要调试UI问题，请使用“Debug”启动应用程序，然后使用'View > Tool Windows > Flutter Inspector'打开Flutter检查器工具窗口。

IntelliJ Flutter Inspector Window

这提供了许多调试工具; 有关这些详细信息，请参阅调试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:

  1. 以调试模式运行您的应用程序.
  2. 在Debug面板中选择'open observatory' (见下面截图), 点击秒表⏱图标 ('Open Observatory').

Debugging panel

Flutter代码提示

辅助 & 快速修正

辅助是与特定代码标识符相关的代码更改。当光标放置在Flutter Widget标识符上时，可以使用其中的一些标识符，如黄色灯泡图标所示。 可以通过单击灯泡或使用键盘快捷Alt-Enter来调用该辅助功能，如下所示：

IntelliJ editing assists

快速修正是类似的，只有显示一段有错误的代码时，他们可以帮助您纠正它。它用一个红色灯泡表示。

辅助菜单中的几个功能：

用新的widget包装当前widget

这可以在您想要包装光标周围的widget时使用，例如，如果要将widget包装在一个Row或中Column。

用新的widget包装widget list

类似于上一条，但是用于包装现有widget 列表而不是单个widget。

将 child 转为 children

将child参数更改为children，并将参数值包装在列表中

实时模板

实时模板可用于加速输入常用的代码结构块。通过输入他们的'前缀'来调用它们，然后在代码补全窗口中选择它们：

IntelliJ live templates

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"。右键单击要更改的绑定并添加键盘快捷键

IntelliJ Settings Keymap

'热重载' vs '完全重启'

热重载通过将更新的源代码文件注入正在运行的Dart VM（虚拟机）中工作。这不仅包括添加新类，还包括向现有类添加方法和字段以及更改现有函数。尽管有几种类型的代码更改无法热重载：

  • 全局变量初始化器.
  • 静态字段初始化器.
  • app的main()方法.

对于这些更改，您可以完全重新启动应用程序，而无需结束调试会话：

不要点击停止按钮; 只需重新单击运行按钮（如果在运行会话中）或调试按钮（如果在调试会话中），或者按住Shift键并单击“热重载”按钮

在IntelliJ IDEA中编辑Android代码 {#edit-android-code}

要在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 plugin README文件中记录了可能影响您的体验的重要已知问题 。

所有已知的错误都会持续跟踪：

我们非常欢迎有关错误/问题和功能请求的反馈。在提交新问题之前，请：

  • 在问题跟踪中快速搜索以查看该问题是否已被跟踪
  • 确保你已经 更新 到了最新版本的插件

提交新issue时，请包括flutter doctor的输出