Flutter 开发工具使用

AS VS VS Code

VS

比较轻量级
前端开发利器
无法调试 Android

AS

google 亲儿子，会率先适配 Flutter 的新特性
Android 开发利器
支持 Flutter 调试

Android Studio

安装 Flutter 和 Dart 插件

打开 Android Studio
打开 Preference > Plugins(MACOS),File(Windows) > Settings > Plugins
选择 Browse repositories ，搜索 Flutter plugin 然后点击安装
安装完后，重新启动 Android Studio

使用技巧

flutter run -d "模拟器名称" //来在指定的模拟器上运行
在使用 AndroidStudio 时，如果弹出说明文档卡住了，需要在 AndroidStudio -> preferences 中搜索 popup 如下图选中未知取消选择

image.png

代码块

可以通过AS中的 preferences -> Editor -> Live Templates 设置自己的代码块
stless: 创建一个StatelessWidget子类
stful: 创建一个创建一个 StatefulWidget 的子类，并关联 State 子类
itar 或 iter: 快速生成 for 循环
stanim：创建一个 StatefulWidget 的子类，并关联 State 子类，包含一个 AnimationController 的初始化字段

快捷键

Ctrl + r 编译运行
cmd + shift + o：全局搜索文件
cmd + shift + f：全局搜索内容
cmd + D: 快速复制当前行
cmd + delete: 删除当前行
Ctrl+option+ O: 删除未使用的import
option + Enter：自动import未导入的文件，鼠标指向未导入的类，然后option + enter
CMD + -/+ 折起/展开代码块
CMD + . 折起/展开选中代码
CMD + [ 光标回到上一次编辑的位置
CMD + ] 光标回到下一次编辑的位置
CMD + L 定位某一行，甚至某一个字符
CMD + Y 查看选中类的属性
option + Enter：在不同的地方有不同的扩展功能，很方便
CMD + option + L 格式化代码
CMD + Option +B 显示所有继承自该类的子类
Command + N 可以快速生成构造方法
option + enter 将statelessWidget 转为statefulWidget
缩进：选中代码按 Tab 健
反缩进：选中代码按 shift + tab 健
CMD + Shit + R：全局搜索替换
cmd + optional + w 将widget 抽取成方法或者类，这个快捷键可能会被占用，需要自己修改
AS中 CMD + option + 左右箭头返回上一层 /下一层

代码编辑提示

option +enter：嵌套辅助/去掉控件
option +enter： child和children相互转换
CMD + option + 左右箭头：返回上一层或下一层文件

实用工具

preferences -> Languages & Frameworks -> Flutter -> Format code on save：保存时自动格式化代码
Dart Analysis: 这里所有的警告，如没用到的变量，重复导入的文件
右上边的Flutter outline：可以清楚地看到所有的小部件，在UI中的排列情况，也可以看出小部件的嵌套情况。Flutter outline 中的 Extract Method。当我们编写来一个Widget，并且代码行数比较长，那可以考虑将这个widget相关的代码，提取到一个方法中
查找类型的引用： Edit > Find > Find Usages

其他设置

修改main.dart路径：如下图所示edit configurations 面板中导入Dart enterpoint：中就是设置main.dart的位置的

image.png

Snip20200715_2.png

性能分析

在 Debug 模式下启动应用后，使用 View > Tool Windows > Flutter Performance打开性能工具窗口，以查看性能数据，以及 widget 的重载信息。
点击 Performance 窗口中的 Show widget rebuild information，查看正在重载的 widget 统计信息和重载频率。右边第二列显示了所在框架的重载次数。如果重载次数过多，会显示一个黄色旋转圆圈。最右一列显示了进入当前页面后 widget 的重载次数。对于未重载的小部件，将显示一个灰色圆圈，否则将显示一个灰色旋转圆圈。

该工具可以帮助你调试至少四个常见的性能问题：

1、整个屏幕（或大部分屏幕）由一个 StatefulWidget 构成，导致不必要的 UI 构建。可将 UI 拆分成多个具有较轻量 build() 方法的 widget。
2、未在屏幕上显示的 widget 发生了重载。例如，一个延伸到屏幕外的 ListView，或者未给延伸到屏幕外的列表设置 RepaintBoundary，会导致重绘整个列表。
3、AnimatedBuilder 的 build() 方法绘制了一个不需要动画的子树，导致不必要的静态对象重载。
4、一个 Opacity widget 在 widget tree 中使用了一个不必要的高度，或者通过直接操作 Opacity widget 的透明属性创建 Opacity 动画，导致 widget 和它的子树重载。