跳到主内容

Android Studio 和 IntelliJ

了解如何在 Android Studio 和其他 IntelliJ 产品中开发 Flutter 应用。

安装和设置

#

安装 Flutter 插件后,Android Studio 和 IntelliJ IDEA 提供完整的 IDE 体验。

要安装以下 IDE 的最新版本,请按照它们的说明操作

安装 Flutter 插件

#
  1. 转到 文件 > 设置

    您也可以按 Ctrl + Alt + S

    将打开 首选项 对话框。

  2. 从左侧列表选择 插件

  3. 从面板顶部选择 市场

  4. 在插件搜索字段中键入 flutter

  5. 选择 Flutter 插件。

  6. 点击安装

  7. 当提示安装插件时,单击

  8. 当提示时,单击 重启

  1. 启动 Android Studio 或 IntelliJ。

  2. 从 macOS 菜单栏转到 Android Studio(或 IntelliJ> 设置...

    您也可以按 Cmd + ,

    将打开 首选项 对话框。

  3. 从左侧列表选择 插件

  4. 从面板顶部选择 市场

  5. 在插件搜索字段中键入 flutter

  6. 选择 Flutter 插件。

  7. 点击安装

  8. 当提示安装插件时,单击

  9. 当提示时,单击 重启

  1. 转到 文件 > 设置

    您也可以按 Ctrl + Alt + S

    将打开 首选项 对话框。

  2. 从左侧列表选择 插件

  3. 从面板顶部选择 市场

  4. 在插件搜索字段中键入 flutter

  5. 选择 Flutter 插件。

  6. 点击安装

  7. 当提示安装插件时,单击

  8. 当提示时,单击 重启

更新插件

#

插件的更新会定期发布。当有可用更新时,IDE 会提示您。

要手动检查更新

  1. 打开首选项(macOS 上的 Android Studio > 检查更新,Linux 上的 帮助 > 检查更新)。
  2. 如果列出了 dartflutter,请更新它们。

创建项目

#

您可以以多种方式创建一个新项目。

创建一个新项目

#

从 Flutter 入门应用模板创建新 Flutter 项目在 Android Studio 和 IntelliJ 之间有所不同。

在 Android Studio 中

  1. 在 IDE 中,从 欢迎 窗口或从主 IDE 窗口的 文件 > 新建 > 新建 Flutter 项目 单击 新建 Flutter 项目
  2. 指定 Flutter SDK 路径,然后单击 下一步
  3. 输入所需的 项目名称描述项目位置
  4. 如果您打算发布此应用,设置公司域名
  5. 点击 Finish(完成)。

在 IntelliJ 中

  1. 在 IDE 中,从 欢迎 窗口或从主 IDE 窗口的 文件 > 新建 > 项目 单击 新建项目
  2. 从左侧面板的 生成器 列表中选择 Flutter
  3. 指定 Flutter SDK 路径,然后单击 下一步
  4. 输入所需的 项目名称描述项目位置
  5. 如果您打算发布此应用,设置公司域名
  6. 点击 Finish(完成)。

设置公司域名

#

创建新应用时,一些 Flutter IDE 插件会要求您提供以反向域名顺序排列的组织名称,例如 com.example。除了应用名称之外,这还用作 Android 的包名称,以及发布应用时的 iOS 的 Bundle ID。如果您认为将来可能会发布此应用,最好现在指定这些信息。发布应用后,它们将无法更改。您的组织名称应该是唯一的。

从现有源代码打开项目

#

要打开现有的 Flutter 项目

  1. 在 IDE 中,从 欢迎 窗口单击 打开,或从主 IDE 窗口的 文件 > 打开

  2. 浏览到包含您的现有 Flutter 源代码文件的目录。

  3. 点击 Open

编辑代码和查看问题

#

Flutter 插件执行代码分析,从而实现以下功能

  • 语法高亮显示。
  • 基于丰富的类型分析的代码补全。
  • 导航到类型声明(导航 > 声明),以及查找类型用法(编辑 > 查找 > 查找用法)。
  • 查看所有当前源代码问题(视图 > 工具窗口 > Dart 分析)。任何分析问题都显示在 Dart 分析窗格中
    Dart Analysis pane

运行和调试

#

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

Main IntelliJ toolbar

选择目标

#

当 IDE 中打开 Flutter 项目时,您应该会在工具栏的右侧看到一组 Flutter 特定的按钮。

  1. 找到 Flutter 目标选择器 下拉按钮。这将显示可用目标的列表。
  2. 选择您希望应用启动的目标。当您连接设备或启动模拟器时,会显示其他条目。

不带断点运行应用

#
  1. 单击工具栏中的 播放图标,或调用 运行 > 运行。底部的 运行 窗格显示日志输出。

带断点运行应用

#
  1. 如果需要,请在源代码中设置断点。
  2. 单击工具栏中的 调试图标,或调用 运行 > 调试
    • 底部的 调试器 窗格显示堆栈帧和变量。
    • 底部的 控制台 窗格显示详细的日志输出。
    • 调试基于默认启动配置。要自定义此配置,请单击设备选择器右侧的下拉按钮,然后选择 编辑配置

快速编辑和刷新开发周期

#

Flutter 提供一流的开发周期,使您能够通过 Stateful Hot Reload 功能几乎立即看到更改的效果。要了解更多信息,请查看 热重载

显示性能数据

#

要查看性能数据,包括小部件重建信息,请在 调试 模式下启动应用,然后使用 视图 > 工具窗口 > Flutter 性能 打开性能工具窗口。

Flutter performance window

要查看有关哪些小部件正在重建以及重建频率的统计信息,请单击 显示小部件重建信息性能 窗格中。此帧的重建计数显示在右侧第二列中。对于大量重建,将显示一个黄色旋转圆圈。最右侧的列显示自进入当前屏幕以来小部件重建的次数。对于未重建的小部件,将显示一个纯灰色圆圈。否则,将显示一个灰色旋转圆圈。

此功能旨在让您了解何时正在重建小部件——您可能在仅查看代码时没有意识到这一点。如果正在重建您没有预料到的小部件,这可能表明您应该通过将大型构建方法拆分为多个小部件来重构代码。

此工具可以帮助您调试至少四个常见的性能问题

  1. 整个屏幕(或其大部分)由单个 StatefulWidget 构建,导致不必要的 UI 构建。将 UI 拆分为更小的小部件,并使用更小的 build() 函数。

  2. 屏幕外的小部件正在重建。例如,当 ListView 嵌套在延伸到屏幕外的 tall Column 中时,可能会发生这种情况。或者,如果未为延伸到屏幕外的列表设置 RepaintBoundary,则会导致整个列表被重新绘制。

  3. AnimatedBuilder 的 build() 函数绘制了一个不需要动画的子树,导致不必要地重建静态对象。

  4. Opacity 小部件放置在小部件树中过高。或者,通过直接操作 Opacity 小部件的不透明度属性来创建不透明度动画,从而导致小部件本身及其子树重建。

您可以单击表格中的一行以导航到源代码中创建小部件的位置。当代码运行时,旋转图标也会显示在代码窗格中,以帮助您可视化正在发生哪些重建。

请注意,大量重建并不一定表示存在问题。通常,只有在您已经在 profile 模式下运行应用并验证性能不符合您的期望后,才应该担心过多的重建。

请记住,小部件重建信息仅在调试构建中可用。在真实设备上以 profile 构建测试应用的性能,但在调试构建中调试性能问题。

Flutter 代码编辑技巧

#

如果您有我们应该分享的其他技巧,请告诉我们

辅助功能和快速修复

#

辅助功能是与特定代码标识符相关的代码更改。当光标放置在 Flutter 小部件标识符上时,可用许多这些辅助功能,如黄色灯泡图标所示。可以通过单击灯泡或使用键盘快捷键(Linux 和 Windows 上的 Alt+Enter,macOS 上的 Option+Return)调用辅助功能,如图所示

IntelliJ editing assists

快速修复类似,但仅当代码片段存在错误时才显示,并且可以帮助纠正它。它们由一个红色的灯泡指示。

用新小部件包装辅助功能

#

当您希望将小部件包装在周围的小部件中时,可以使用它,例如,如果您想将小部件包装在 RowColumn 中。

用新小部件包装小部件列表辅助功能

#

类似于上面的辅助功能,但用于包装现有小部件列表而不是单个小部件。

将子项转换为子项辅助功能

#

将子项参数更改为子项参数,并将参数值包装在列表中。

实时模板

#

实时模板可用于加快输入典型代码结构的速度。它们通过键入其前缀然后在代码完成窗口中选择它来调用

IntelliJ live templates

Flutter 插件包含以下模板

  • 前缀 stless:创建一个新的 StatelessWidget 子类。
  • 前缀 stful:创建一个新的 StatefulWidget 子类及其关联的 State 子类。
  • 前缀 stanim:创建一个新的 StatefulWidget 子类及其关联的 State 子类,包括使用 AnimationController 初始化字段。

您也可以在设置 > 编辑器 > 实时代码模板中定义自定义模板。

键盘快捷键

#

热重载

在 Linux(键位映射XWin 默认值)和 Windows 上,键盘快捷键为 Control+Alt+;Control+Backslash

在 macOS(键位映射Mac OS X 10.5+ 复制)上,键盘快捷键为 Command+OptionCommand+Backslash

可以在 IDE 偏好设置/设置中更改键盘映射:选择键位映射,然后在右上角的搜索框中输入flutter。右键单击您想要更改的绑定,然后选择添加键盘快捷键

IntelliJ settings keymap

热重载与热重启

#

热重载通过将更新后的源代码文件注入到正在运行的 Dart 虚拟机 (VM) 中来工作。这不仅包括添加新的类,还包括向现有类添加方法和字段,以及更改现有函数。但是,有些类型的代码更改无法进行热重载

  • 全局变量初始化器
  • 静态字段初始化器
  • 应用程序的 main() 方法

对于这些更改,您可以完全重启您的应用程序,而无需结束您的调试会话。要执行热重启,不要单击“停止”按钮,只需重新单击“运行”按钮(如果在运行会话中)或“调试”按钮(如果在调试会话中),或者按住 Shift 键单击“热重载”按钮。

在 Android Studio 中使用完整的 IDE 支持编辑 Android 代码

#

打开 Flutter 项目的根目录不会将所有 Android 文件暴露给 IDE。Flutter 应用程序包含一个名为 android 的子目录。如果您将此子目录作为 Android Studio 中的独立项目打开,IDE 将能够完全支持编辑和重构所有 Android 文件(如 Gradle 脚本)。

如果您已经将整个项目作为 Flutter 应用程序在 Android Studio 中打开,则有两种等效的方法可以在 IDE 中单独打开 Android 文件进行编辑。在尝试此操作之前,请确保您使用的是最新版本的 Android Studio 和 Flutter 插件。

  • “项目视图”中,您应该在 Flutter 应用程序的根目录下看到一个名为 android 的子目录。右键单击它,然后选择 Flutter > 在 Android Studio 中打开 Android 模块
  • 或者,您可以打开 android 子目录下的任何文件进行编辑。然后,您应该在编辑器的顶部看到一个“Flutter 命令”横幅,其中包含一个标有 在 Android Studio 中打开编辑 的链接。单击该链接。

对于这两个选项,Android Studio 都会为您提供使用单独窗口或用新项目替换现有窗口的选项。两种选项都可以。

如果您尚未在 Android Studio 中打开 Flutter 项目,则可以从一开始就将 Android 文件作为其自身项目打开

  1. 单击欢迎启动屏幕上的 打开现有的 Android Studio 项目,或如果 Android Studio 已经打开,则单击 文件 > 打开
  2. 打开 Flutter 应用程序根目录下的 android 子目录。例如,如果项目名为 flutter_app,则打开 flutter_app/android

如果您尚未运行 Flutter 应用程序,您可能会看到 Android Studio 在打开 android 项目时报告构建错误。在应用程序的根目录中运行 flutter pub get,并通过选择 构建 > 生成 来重建项目以解决此问题。

在 IntelliJ IDEA 中编辑 Android 代码

#

要在 IntelliJ IDEA 中启用 Android 代码编辑,您需要配置 Android SDK 的位置

  1. 偏好设置 > 插件 中,如果尚未启用,请启用 Android 支持
  2. 右键单击项目视图中的 android 文件夹,然后选择 打开模块设置
  3. 选项卡中,找到 语言级别 字段,然后选择级别 8 或更高版本。
  4. 依赖项 选项卡中,找到 模块 SDK 字段,然后选择 Android SDK。如果未列出 SDK,请单击 新建 并指定 Android SDK 的位置。请确保选择与 Flutter 使用的 Android SDK 匹配的 Android SDK(如 flutter doctor 报告)。
  5. 单击 确定

Flutter 属性编辑器

#

Flutter 属性编辑器是由 Flutter 插件 提供的一项强大工具,它允许您直接从其可视化界面查看和修改小部件属性。

如何在 Android Studio 和 IntelliJ 中打开 Flutter 属性编辑器

#
  1. 单击 Android Studio 或 IntelliJ 侧边栏中的 Flutter 属性编辑器 图标 Flutter Property Editor Android Studio/IntelliJ icon
  2. Flutter 属性编辑器将加载到侧面板中。
  3. 请参阅 Flutter 属性编辑器 文档 以获取详细的使用指南。

Flutter Property Editor side panel in Android Studio/IntelliJ

故障排除

#

已知问题和反馈

#

重要的已知问题可能会影响您的体验,这些问题记录在 Flutter 插件 README 文件中。

已知错误和功能请求在问题跟踪器中跟踪

我们欢迎反馈,包括错误/问题和功能请求。在提交新问题之前

  • 请在问题跟踪器中快速搜索,查看是否已经跟踪了该问题。
  • 请确保您已 更新 到插件的最新版本。

在提交新问题时,请包含 flutter doctor 的输出。