Android Studio 和 IntelliJ
安装与设置
#安装 Flutter 插件后,Android Studio 和 IntelliJ IDEA 将提供完整的 IDE 体验。
要安装以下 IDE 的最新版本,请按照其说明操作
安装 Flutter 插件
#前往 File > Settings。
你也可以按下 Ctrl + Alt + S。
Preferences 对话框将打开。
从左侧列表中,选择 Plugins。
从此面板顶部,选择 Marketplace。
在插件搜索字段中键入
flutter
。选择 Flutter 插件。
点击安装。
当提示安装插件时,点击是。
当提示时,点击重启。
启动 Android Studio 或 IntelliJ。
从 macOS 菜单栏,前往 Android Studio (或 IntelliJ) > Settings...。
你也可以按下 Cmd + ,。
Preferences 对话框将打开。
从左侧列表中,选择 Plugins。
从此面板顶部,选择 Marketplace。
在插件搜索字段中键入
flutter
。选择 Flutter 插件。
点击安装。
当提示安装插件时,点击是。
当提示时,点击重启。
前往 File > Settings。
你也可以按下 Ctrl + Alt + S。
Preferences 对话框将打开。
从左侧列表中,选择 Plugins。
从此面板顶部,选择 Marketplace。
在插件搜索字段中键入
flutter
。选择 Flutter 插件。
点击安装。
当提示安装插件时,点击是。
当提示时,点击重启。
更新插件
#插件更新定期发布。当有可用更新时,IDE 中会提示您。
手动检查更新
- 打开首选项(macOS 上为 Android Studio > Check for Updates,Linux 上为 Help > Check for Updates)。
- 如果列出了
dart
或flutter
,请更新它们。
创建项目
#你可以通过几种方式创建新项目。
创建新项目
#从 Flutter 启动应用模板创建新 Flutter 项目在 Android Studio 和 IntelliJ 中有所不同。
在 Android Studio 中
- 在 IDE 中,从欢迎窗口点击新建 Flutter 项目,或从主 IDE 窗口点击文件 > 新建 > 新建 Flutter 项目。
- 指定 Flutter SDK 路径并点击下一步。
- 输入你想要的项目名称、描述和项目位置。
- 如果你可能发布此应用,请设置公司域。
- 点击 Finish(完成)。
在 IntelliJ 中
- 在 IDE 中,从欢迎窗口点击新建项目,或从主 IDE 窗口点击文件 > 新建 > 项目。
- 在左侧面板的生成器列表中选择 Flutter
- 指定 Flutter SDK 路径并点击下一步。
- 输入你想要的项目名称、描述和项目位置。
- 如果你可能发布此应用,请设置公司域。
- 点击 Finish(完成)。
设置公司域
#创建新应用时,一些 Flutter IDE 插件会要求输入一个以反向域名顺序排列的组织名称,例如 com.example
。与应用名称一起,这将在应用发布时用作 Android 的包名和 iOS 的 Bundle ID。如果你认为你可能会发布此应用,最好现在就指定这些信息。一旦应用发布,它们就无法更改。你的组织名称应该是唯一的。
从现有源代码打开项目
#打开现有 Flutter 项目
在 IDE 中,从欢迎窗口点击打开,或从主 IDE 窗口点击文件 > 打开。
浏览到包含你现有 Flutter 源代码文件的目录。
点击 Open。
编辑代码和查看问题
#Flutter 插件执行代码分析,提供以下功能
- 语法高亮。
- 基于丰富的类型分析进行代码补全。
- 导航到类型声明(导航 > 声明),以及查找类型用法(编辑 > 查找 > 查找用法)。
- 查看所有当前源代码问题(视图 > 工具窗口 > Dart 分析)。任何分析问题都显示在 Dart 分析窗格中
运行与调试
#运行和调试由主工具栏控制
选择目标设备
#当 Flutter 项目在 IDE 中打开时,你会在工具栏的右侧看到一组 Flutter 特定的按钮。
- 找到Flutter 目标选择器下拉按钮。这将显示可用目标设备的列表。
- 选择你想要启动应用的目标设备。当你连接设备或启动模拟器时,会出现额外的条目。
不带断点运行应用
#- 点击工具栏中的播放图标,或调用运行 > 运行。底部运行窗格显示日志输出。
带断点运行应用
#- 如果需要,在你的源代码中设置断点。
- 点击工具栏中的调试图标,或调用运行 > 调试。
- 底部调试器窗格显示栈帧和变量。
- 底部控制台窗格显示详细的日志输出。
- 调试基于默认的启动配置。要自定义此配置,点击设备选择器右侧的下拉按钮,然后选择编辑配置。
快速编辑和刷新开发周期
#Flutter 提供了一流的开发周期,通过有状态热重载功能,你可以几乎即时看到你的更改效果。要了解更多信息,请查看热重载。
显示性能数据
#要查看性能数据,包括 widget 重建信息,请在调试模式下启动应用,然后使用视图 > 工具窗口 > Flutter 性能打开性能工具窗口。
要查看哪些 widget 正在重建以及重建频率的统计信息,请在性能窗格中点击显示 widget 重建信息。此帧的重建精确计数显示在从右数第二列中。对于大量重建,会显示一个黄色旋转圆圈。最右侧的列显示自进入当前屏幕以来 widget 被重建的次数。对于未重建的 widget,显示一个实心灰色圆圈。否则,显示一个灰色旋转圆圈。
此功能的目的是让你了解 widget 何时正在重建——你可能只看代码时没有意识到这种情况。如果你不希望重建的 widget 正在重建,这可能是一个信号,表明你应该通过将大型 build 方法拆分为多个 widget 来重构你的代码。
此工具可以帮助你调试至少四个常见的性能问题
整个屏幕(或其大部分)由单个 StatefulWidget 构建,导致不必要的 UI 构建。将 UI 拆分为具有更小的
build()
函数的更小 widget。屏幕外的 widget 正在重建。例如,当 ListView 嵌套在一个延伸到屏幕外的较高 Column 中时,或者当一个延伸到屏幕外的列表没有设置 RepaintBoundary 时,都可能发生这种情况,导致整个列表被重绘。
AnimatedBuilder 的
build()
函数绘制了一个不需要动画的子树,导致静态对象的不必要重建。Opacity widget 被不必要地放置在 widget 树的较高位置。或者,通过直接操纵 Opacity widget 的不透明度属性来创建 Opacity 动画,导致 widget 本身及其子树重建。
你可以点击表格中的一行,导航到源代码中创建该 widget 的行。当代码运行时,旋转图标也会显示在代码窗格中,帮助你可视化正在发生的重建。
请注意,大量的重建不一定表示有问题。通常,只有当你已经在 profile 模式下运行应用并验证性能不符合你的要求时,才需要担心过度重建。
请记住,widget 重建信息仅在调试版本中可用。在 profile 版本中在真实设备上测试应用的性能,但在调试版本中调试性能问题。
Flutter 代码编辑技巧
#如果你有我们应该分享的其他技巧,请告诉我们!
辅助功能与快速修复
#辅助功能是与特定代码标识符相关的代码更改。当光标放置在 Flutter widget 标识符上时,会出现一个黄色灯泡图标,表示有多个此类功能可用。可以通过点击灯泡或使用键盘快捷键(Linux 和 Windows 上为 Alt
+Enter
,macOS 上为 Option
+Return
)来调用辅助功能,如下所示
快速修复与此类似,不同之处在于它们在代码出现错误时显示,并且可以帮助纠正错误。它们由红色灯泡图标表示。
用新 widget 包裹辅助功能
#当你有一个想要用周围的 widget 包裹的 widget 时,可以使用此功能,例如,如果你想将一个 widget 包裹在 Row
或 Column
中。
用新 widget 包裹 widget 列表辅助功能
#与上述辅助功能类似,但用于包裹现有 widget 列表而不是单个 widget。
将 child 转换为 children 辅助功能
#将 child 参数更改为 children 参数,并将参数值包裹在一个列表中。
实时模板
#实时模板可用于加快输入常见的代码结构。通过键入其前缀,然后在代码补全窗口中选择它来调用它们
Flutter 插件包含以下模板
- 前缀
stless
:创建一个新的StatelessWidget
子类。 - 前缀
stful
:创建一个新的StatefulWidget
子类及其关联的 State 子类。 - 前缀
stanim
:创建一个新的StatefulWidget
子类及其关联的 State 子类,包括一个用AnimationController
初始化的字段。
你也可以在设置 > 编辑器 > 实时模板中定义自定义模板。
键盘快捷键
#热重载
在 Linux (键盘映射 Default for XWin) 和 Windows 上,键盘快捷键是 Control
+Alt
+;
和 Control
+Backslash
。
在 macOS (键盘映射 Mac OS X 10.5+ copy) 上,键盘快捷键是 Command
+Option
和 Command
+Backslash
。
键盘映射可以在 IDE 首选项/设置中更改:选择键盘映射,然后在右上角的搜索框中输入flutter。右键点击你想要更改的绑定,然后选择添加键盘快捷键。
热重载与热重启
#热重载的工作原理是将更新的源代码文件注入到正在运行的 Dart VM(虚拟机)中。这不仅包括添加新类,还包括向现有类添加方法和字段,以及更改现有函数。但有几种类型的代码更改无法进行热重载
- 全局变量初始化器
- 静态字段初始化器
- 应用的
main()
方法
对于这些更改,你可以完全重新启动你的应用程序,而无需结束调试会话。要执行热重启,不要点击停止按钮,只需重新点击运行按钮(如果在运行会话中)或调试按钮(如果在调试会话中),或者按住 Shift 键点击“热重载”按钮。
在 Android Studio 中编辑 Android 代码(提供完整的 IDE 支持)
#打开 Flutter 项目的根目录并不能将所有 Android 文件暴露给 IDE。Flutter 应用包含一个名为 android
的子目录。如果你在 Android Studio 中将此子目录作为其自己的独立项目打开,IDE 将能够完全支持编辑和重构所有 Android 文件(如 Gradle 脚本)。
如果你已在 Android Studio 中将整个项目作为 Flutter 应用打开,有两种等效方法可以在 IDE 中单独打开 Android 文件进行编辑。在尝试此操作之前,请确保你使用的是最新版本的 Android Studio 和 Flutter 插件。
- 在“项目视图”中,你应该会在 Flutter 应用的根目录下看到一个名为
android
的子目录。右键点击它,然后选择Flutter > 在 Android Studio 中打开 Android 模块。 - 或者,你可以打开
android
子目录下的任何文件进行编辑。然后,你会在编辑器顶部看到一个“Flutter 命令”横幅,其中包含一个标有在 Android Studio 中打开以进行编辑的链接。点击该链接。
对于这两种选项,Android Studio 都会在你打开第二个项目时提供使用单独窗口或用新项目替换现有窗口的选项。这两种选项都可以。
如果你尚未在 Android Studio 中打开 Flutter 项目,你可以从一开始就将 Android 文件作为自己的项目打开
- 在欢迎启动屏幕上点击打开现有 Android Studio 项目,或者如果 Android Studio 已打开,则点击文件 > 打开。
- 打开 Flutter 应用根目录下的
android
子目录。例如,如果项目名为flutter_app
,则打开flutter_app/android
。
如果你尚未运行 Flutter 应用,当你打开 android
项目时,Android Studio 可能会报告构建错误。在应用根目录中运行 flutter pub get
,并通过选择构建 > 生成来重建项目以修复它。
在 IntelliJ IDEA 中编辑 Android 代码
#要在 IntelliJ IDEA 中启用 Android 代码编辑,你需要配置 Android SDK 的位置
- 在首选项 > 插件中,如果尚未启用,请启用Android 支持。
- 右键点击项目视图中的 android 文件夹,然后选择打开模块设置。
- 在源代码选项卡中,找到语言级别字段,并选择级别 8 或更高版本。
- 在依赖项选项卡中,找到模块 SDK字段,并选择一个 Android SDK。如果没有列出 SDK,请点击新建并指定 Android SDK 的位置。确保选择与 Flutter 使用的 Android SDK 相匹配的 SDK(如
flutter doctor
报告)。 - 点击确定。
Flutter 属性编辑器
#Flutter 属性编辑器是Flutter 插件提供的一个强大工具,它允许你直接从其可视化界面查看和修改 widget 属性。
如何在 Android Studio 和 IntelliJ 中打开 Flutter 属性编辑器
#- 点击 Android Studio 或 IntelliJ 侧边栏中的 Flutter 属性编辑器图标
。
- Flutter 属性编辑器将在侧面板中加载。
- 请参阅 Flutter 属性编辑器文档以获取详细的使用指南。
故障排除
#已知问题和反馈
#可能影响你体验的重要已知问题已记录在Flutter 插件 README 文件中。
所有已知 bug 都在问题跟踪器中进行跟踪
- Flutter 插件:GitHub 问题跟踪器
- Dart 插件:JetBrains YouTrack
我们欢迎对 bug/问题和功能请求的反馈。在提交新问题之前
- 在问题跟踪器中快速搜索,看看该问题是否已存在。
- 确保你已更新到插件的最新版本。
提交新问题时,请包含 flutter doctor
的输出。