Android Studio 和 IntelliJ

• Android Studio 和 IntelliJ
• Visual Studio Code

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

要安装以下 IDE 的最新版本，请遵循它们各自的说明

• Android Studio
• IntelliJ IDEA Community
• IntelliJ IDEA Ultimate

插件会定期更新。当有可用更新时，IDE 中会提示你。

手动检查更新

1. 打开首选项（macOS 上为 Android Studio > Check for Updates，Linux 上为 Help > Check for Updates）。
2. 如果列出了 dart 或 flutter，请更新它们。

你可以通过多种方式创建新项目。

在 Android Studio 和 IntelliJ 中，通过 Flutter 入门应用模板创建新项目的步骤略有不同。

在 Android Studio 中

1. 在 IDE 中，点击 Welcome 窗口中的 New Flutter Project，或点击主 IDE 窗口中的 File > New > New Flutter Project。
2. 指定 Flutter SDK path，然后点击 Next。
3. 输入你想要的 Project name、Description 和 Project location。
4. 如果你计划发布此应用，请 设置公司域名。
5. 点击 Finish（完成）。

在 IntelliJ 中

1. 在 IDE 中，点击 Welcome 窗口中的 New Project，或点击主 IDE 窗口中的 File > New > Project。
2. 从左侧面板的 Generators 列表中选择 Flutter。
3. 指定 Flutter SDK path，然后点击 Next。
4. 输入你想要的 Project name、Description 和 Project location。
5. 如果你计划发布此应用，请 设置公司域名。
6. 点击 Finish（完成）。

创建新应用时，某些 Flutter IDE 插件会要求输入反向域名格式的组织名称，例如 com.example。除了应用名称外，这在发布应用时还会用作 Android 的包名和 iOS 的 Bundle ID。如果你认为将来可能会发布此应用，最好现在就指定这些信息。应用发布后，它们将无法更改。你的组织名称应该是唯一的。

打开现有 Flutter 项目

1. 在 IDE 中，点击 Welcome 窗口中的 Open，或点击主 IDE 窗口中的 File > Open。

2. 浏览到存放现有 Flutter 源代码文件的目录。

3. 点击 Open。

Flutter 插件执行的代码分析支持以下功能

• 语法高亮。
• 基于丰富类型分析的代码补全。
• 导航到类型定义 (Navigate > Declaration) 以及查找类型用法 (Edit > Find > Find Usages)。
• 查看所有当前的源代码问题 (View > Tool Windows > Dart Analysis)。任何分析问题都会显示在 Dart Analysis 面板中。
  

运行和调试通过主工具栏进行控制

当在 IDE 中打开 Flutter 项目时，你应该会在工具栏右侧看到一组 Flutter 专用按钮。

1. 找到 Flutter Target Selector 下拉按钮。这会显示可用目标的列表。
2. 选择你希望运行应用的目标。当你连接设备或启动模拟器时，会出现额外的条目。

1. 点击工具栏中的 播放图标，或执行 Run > Run。底部的 Run 面板将显示日志输出。

1. 如果需要，在源代码中设置断点。
2. 点击工具栏中的 调试图标，或执行 Run > Debug。
   • 底部的 Debugger 面板会显示堆栈帧和变量。
   • 底部的 Console 面板会显示详细的日志输出。
   • 调试基于默认的启动配置。要自定义此配置，请点击设备选择器右侧的下拉按钮，并选择 Edit configuration。

Flutter 提供了一流的开发周期，使你能够通过 Stateful Hot Reload (有状态热重载) 功能几乎瞬间看到更改的效果。要了解更多信息，请查看 热重载。

要查看性能数据（包括组件重建信息），请在 Debug 模式下启动应用，然后使用 View > Tool Windows > Flutter Performance 打开性能工具窗口。

要查看有关哪些组件正在被重建以及重建频率的统计信息，请点击 Performance 面板中的 Show widget rebuild information。本帧重建的确切计数显示在右侧第二列。对于重建次数较多的组件，会显示一个黄色的旋转圆圈。最右侧的一列显示自进入当前屏幕以来组件被重建的次数。对于未重建的组件，显示为实心灰色圆圈。否则，显示为灰色旋转圆圈。

此功能的目的是让你意识到组件何时正在重建——当你只看代码时，可能没有意识到这一点。如果组件正在重建且超出了你的预期，这通常是一个信号，你应该通过将大的 build 方法拆分为多个组件来重构代码。

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

1. 整个屏幕（或其中的很大一部分）由单个 StatefulWidget 构建，导致不必要的 UI 构建。将 UI 拆分为具有较小 build() 函数的较小组件。

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

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

4. Opacity 组件在组件树中放置得不必要地高。或者，通过直接操作 Opacity 组件的 opacity 属性来创建透明度动画，导致组件本身及其子树重建。

你可以点击表格中的某一行以导航到源代码中创建该组件的行。随着代码运行，旋转图标也会显示在代码面板中，帮助你可视化正在发生的重建。

请注意，大量的重建并不一定表示有问题。通常，你应该仅在已经以 profile 模式运行应用并确认性能未达到预期后，才去担心过度的重建问题。

并且请记住，组件重建信息仅在 debug 版本中可用。在真实设备上以 profile 版本测试应用的性能，但在 debug 版本中调试性能问题。

如果你有其他我们应该分享的技巧，请 告诉我们！

辅助功能 (Assists) 是与特定代码标识符相关的代码更改。当光标位于 Flutter 组件标识符上时，可以使用其中的许多功能，黄色灯泡图标即为指示。可以通过点击灯泡或使用键盘快捷键（Linux 和 Windows 上为 Alt+Enter，macOS 上为 Option+Return）来调用辅助功能，如图所示。

快速修复 (Quick Fixes) 类似，只是它们在一段代码有错误时显示，并且可以帮助纠正错误。它们由一个红色灯泡指示。

当你有一个想要用外层组件包裹的组件时，可以使用此功能，例如如果你想用 Row 或 Column 包裹一个组件。

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

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

实时模板 (Live templates) 可用于加快输入典型代码结构的速度。它们通过输入其前缀，然后在代码补全窗口中进行选择来调用。

Flutter 插件包含以下模板

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

你也可以在 Settings > Editor > Live Templates 中定义自定义模板。

热重载

在 Linux（键盘映射为 Default for XWin）和 Windows 上，键盘快捷键为 Control+Alt+; 和 Control+Backslash。

在 macOS（键盘映射为 Mac OS X 10.5+ copy）上，键盘快捷键为 Command+Option 和 Command+Backslash。

键盘映射可以在 IDE 首选项/设置中更改：选择 Keymap，然后在右上角的搜索框中输入 flutter。右键点击你想要更改的绑定，然后选择 Add Keyboard Shortcut。

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

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

对于这些更改，你可以完全重启应用，而无需结束调试会话。要执行热重启，请不要点击停止按钮，只需重新点击“运行”按钮（如果在运行会话中）或“调试”按钮（如果在调试会话中），或者按住 Shift 点击“热重载”按钮。

打开 Flutter 项目的根目录并不会向 IDE 暴露所有的 Android 文件。Flutter 应用包含一个名为 android 的子目录。如果你在 Android Studio 中将此子目录作为独立的单独项目打开，IDE 将能够全面支持编辑和重构所有 Android 文件（如 Gradle 脚本）。

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

• 在 "项目视图" 中，你应该能在 flutter 应用根目录下方立即看到一个名为 android 的子目录。右键点击它，然后选择 Flutter > Open Android module in Android Studio。
• 或者，你可以打开 android 子目录下的任何文件进行编辑。然后，你应该会在编辑器顶部看到一个“Flutter commands”横幅，其中包含一个标签为 Open for Editing in Android Studio 的链接。点击该链接。

对于这两种选项，Android Studio 都会让你选择是使用单独的窗口，还是在打开第二个项目时替换现有窗口。任一选项均可。

如果你还没有在 Android Studio 中打开 Flutter 项目，你可以从一开始就将 Android 文件作为自己的项目打开

1. 点击欢迎启动屏幕上的 Open an existing Android Studio Project，或者如果 Android Studio 已经打开，则点击 File > Open。
2. 打开位于 flutter 应用根目录下的 android 子目录。例如，如果项目名为 flutter_app，则打开 flutter_app/android。

如果你还没有运行过 Flutter 应用，当你打开 android 项目时，可能会看到 Android Studio 报告构建错误。在应用的根目录中运行 flutter pub get，并通过选择 Build > Make 来重新构建项目以修复该问题。

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

1. 在 Preferences > Plugins 中，启用 Android Support（如果尚未启用）。
2. 在项目视图中右键点击 android 文件夹，选择 Open Module Settings。
3. 在 Sources 选项卡中，找到 Language level 字段，并选择级别 8 或更高。
4. 在 Dependencies 选项卡中，找到 Module SDK 字段，并选择一个 Android SDK。如果没有列出 SDK，请点击 New 并指定 Android SDK 的位置。确保选择与 Flutter 使用的 Android SDK 相匹配的 SDK（如 flutter doctor 所报告的）。
5. 点击 OK。

Flutter 属性编辑器是由 Flutter 插件 提供的一款强大工具，允许你直接从其可视化界面查看和修改组件属性。

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

可能会影响你使用体验的重要已知问题已记录在 Flutter 插件 README 文件中。

已知的 Bug 和功能请求在问题追踪系统中进行跟踪

• Flutter 插件问题追踪器
• Dart 插件问题追踪器

我们欢迎反馈，无论是关于 Bug/问题还是功能请求。在提交新问题之前

• 请在问题追踪器中快速搜索，看看该问题是否已经被跟踪。
• 确保你已 更新 到插件的最新版本。

提交新问题时，请包含 flutter doctor 的输出 信息。