王若风的技术博客

世界尽头の冷酷仙境

0%

Flutter 开发Tips （第二期）

发表于 更新于 分类于
本文字数： 4.1k 阅读时长 ≈ 4 分钟

提高flutter attach的成功率

方案1

断开wifi，执行flutter attach，attach成功后再链接wifi

方案2

通过指定设备uuid进行attach

  1. 通过flutter devices查找已链接设备列表，获取链接设备的uuid
  2. flutter attach -d <#uuid#> 指定想要attach的设备进行连接，例如flutter attach -d AE5D772C-6D56-43AD-83F2-0554257B16C4

Xnip2020-09-17_02-35-23

方案3

通过指定应用的app-id进行attach

  1. 同一wifi环境下如果有多台相同项目设备连接中，找到你需要attach的app-id进行连接
  2. 执行：flutter attach --app-id <#app_id#> 例如：flutter attach --app-id com.xxx.xxx

从package中加载json文件

背景

例如我这里有一个flutter的demo项目叫flutter_demo_package_json_load，在根目录通过命令：flutter create --template=package json_test_package,创建了一个名为json_test_package的package，在package的assets中有一个为test2.json文件，现在需要在package中加载到改文件。

从工程加载json

对于普通项目的json文件，加载方式如下：

  1. 在项目中添加json文件，例如项目的assets下有一个名为test1.json的文件

  2. 我们在yaml中添加如下依赖

    1
    2
    3
    4
    5
    6
    7
    8
    # 只加载assets下的test1.json文件
    assets:
      - assets/test1.json

    # 或者
    # 加载assets下的所有文件
     assets:
      - assets/

  3. 通过rootBundle加载

    1
    2
    3
    4
    Future<String> _loadFromProjectAsset() async {
      // json file in project,is ok
      return rootBundle.loadString("assets/test1.json");
    }

但是对于package下面json文件上面的方法失效了，使用上面的方法加载将会报错，错误信息如下：

image-20200917144141986

错误原因是资源路径不对，加载不到，因为rootBundle类没有提供package name的参数，我们只能把package name信息放在资源路径里面。

从package加载json

灵感来自https://pub.dev/packages/lottie库的`Lottie.asset(“assetsPath”,package: “package_name”)`方法，因为lottie实现动画的原理也是加载一份json配置，不过这个方法支持指定package配置。

image-20200917145538741

这里的keyName就是我们rootBundle类里面需要用的资源路径，包含带package的情况。

正确的方式如下：

  1. 第一步和上面一样，将json文件添加到工程中，假如这里我们package里面的json文件名为test2.json
  2. 在yaml中添加如下依赖
    1
    2
    3
    4
    5
    6
    7
    8
    # 只加载assets下的test2.json文件
    assets:
     - assets/test2.json

    # 或者
    # 加载assets下的所有文件
    assets:
     - assets/
  3. 通过rootBundle加载，但是path的格式为 packages/<#package_name#>/<#file_path#>

这里为

1
2
3
4
5
6
// json file in package,this is work
Future<String> _loadFromPackageAsset() async {
  // 【importance】 packag json file need use this formate:
  // `packages/$package/$assetName`
  return rootBundle.loadString("packages/json_test_package/assets/test2.json");
}

通过DefaultAssetBundle也是一样可以

1
2
3
4
5
6
7
// This is work too.
Future<String> testLoadJsonFileByDefaultAssetBundle(BuildContext context) {
  // 【importance】 packag json file need use this formate:
  // `packages/$package/$assetName`
  return DefaultAssetBundle.of(context)
      .loadString('packages/json_test_package/assets/test2.json');
}

Demo链接

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服务

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

or

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

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

1
Serving DevTools at http://127.0.0.1:9100

Start an application to debug

运行app

1
2
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

参考