本文主要介绍flutter开发小技巧

flutter analyse

配置步骤

  • 在项目更目录添加analysis_options.yaml文件可以配置lint规则和analyzer行为

  • 具体支持的lint规则参考https://dart-lang.github.io/linter/lints/

  • 目前有3类已经定义的常用规则

    Many lints are included in various predefined rulesets:

  • 推荐使用google团队内部的规则库pedantic

    • 在yaml里面添加依赖 pedantic: ^1.8.0+1
  • analysis_options.yaml里面引入使用

    include: package:pedantic/analysis_options.1.8.0.yaml

使用

配置好analysis_options.yaml文件的规则后,执行flutter analyse命令将对你整个项目或者package的代码进行静态分析

修复

  • 根据提示修复

点击提示的规则,就会跳转到需要修复位置,按照lint规则的说明和例子就可以修正了。 flutter_analyse_1

  • 利用VSCode快速修复

在提示有问题的代码的地方Ctrl +., 就会自动弹出快速修复,比如图中为增加const标识。 是不是快多了。 flutter_analyse_1 屏幕快照 2020-09-17 上午2.24.55

参考配置

当然你还可以根据你的需要定制自己的静态分析规则,下面是最近使用的一套配置,仅供你参考:

analysis_options.yaml参考配置

dartfmt 命令

  • dartfmt ./ -w 静态分析代码,并尝试自动修复
  • dartfmt ./ -n 静态分析代码,不会修复代码

DevTool介绍

flutter提供了一个devTool系列工具,方便开发者进行调试,查看日志,网络请求,性能等信息,更多信息请参考DevTools

Install DevTools

Launch the DevTools application server

启动本地web服务

pub global run devtools   # If you have `pub` on your path.

or

flutter pub global run devtools   # If you have `flutter` on your path.

在命令行,你应该看到类似下面输出,表明服务启动成功

Serving DevTools at http://127.0.0.1:9100

Start an application to debug

运行app

cd path/to/flutter/app
flutter run

一旦你成功运行起来你的app,你将在终端控制台看到如下类似的信息

image-20200917151951722

用浏览器打开里面的地址,格式如下

http://127.0.0.1:59681/fVO-_3yziG8=/

打开将会看到下面的调试面板,可以根据自己的需要进行调试

image-20200917152140975

这里有一个很有用的功能,【debug】

打开页面可以查看断点的帧和控制台的日志。

image-20200917152456458

Open DevTools and connect to the target app

一旦工程运行起来了,在浏览器打开http://localhost:9100,打开DevTools完整版本

image-20200917152646210

输入上面的地址,点击Connect,跳转到完整devTools

image-20200917152806254

这里的功能非常强大和具体使用可以参考官方文档

flutter 调试

这里以VSCode为例

纯flutter项目

纯flutter项目比较简单,VSCode支持各种devtool,使用debug模式运行app,或者直接按F5

image-20200917150502934

运行成功后会出现一下工具条

image-20200917150559335

控制台输出以下内容

image-20200917150622481

例如这里我们在这个文件107行直接下一个断点,代码执行到时会触发断点

image-20200917150821892

此时工具栏变成下面的样式

image-20200917150846708

可以通过相关的按钮进行断点调试

混合项目(原生+flutter)

  1. 打开已经编译运行过的原生端App

  2. 通过VSCode打开壳工程,进入壳工程根目录

  3. 选择main.dart文件

  4. 执行cmd+shift+p,呼出VSCode命令面板,输入>attach to flutter onDevice

    image-20200917153401365

    选择下面的对应的命令执行

    如果attach不上请断开wifi重试

  5. Attach 成功的话会显示下面一条悬浮工具栏和纯flutter相比里面多了一个类似插头的按钮

    image-20200917153656732

    Debug Console控制台也会输出下面信息

    image-20200917153719698

  6. 剩下的调试和上面DevTool介绍的流程一致

  7. 在这个项目里面可以直接对引用到的代码进行断点调试

    image-20200917154306797

参考