Flutter徽章生成插件test_badge_gen的使用

Flutter徽章生成插件test_badge_gen的使用

特性

  • 基于lcov.info文件生成测试覆盖率徽章。
  • 可以自定义输出文件路径。
  • 使用Dart开发，速度快且可靠。
  • 提供有用的控制台输出和指导。

安装

  1. 激活test_badge_gen包：

    • Flutter:
      flutter pub global activate test_badge_gen
    • 或者使用Dart:
      dart pub global activate test_badge_gen

  2. 确保CLI可执行文件全局可用。将Dart bin文件夹添加到PATH环境变量：

    export PATH="$PATH":"$HOME/.pub-cache/bin"

  3. 验证安装：

    badge-test --help

使用

badge-test CLI提供了生成测试覆盖率徽章的命令。以下是使用说明及示例。

命令: gen

gen命令从指定的lcov.info文件生成徽章。

语法:
badge-test gen --in=<path_to_lcov.info> --out=<output_path>
选项:
选项 描述 必须 默认
--in= 输入lcov.info文件的路径。 是 无
--out= 生成徽章的输出路径。如果不指定，默认为coverage_badge.svg。 否 coverage_badge.svg
示例:

  1. 基本用法:

    badge-test gen --in=lcov.info

    这将在当前目录下生成一个名为coverage_badge.svg的徽章文件。

  2. 自定义输出路径:

    badge-test gen --in=lcov.info --out=badges/test_coverage.svg

    这将在指定的输出路径下生成徽章文件。

  3. 错误处理: 如果输入文件缺失或无效，命令将提示错误消息:

    Generator failed! Please input lcov.info file path.

其他信息

在README中显示

添加以下内容：

Coverage


#### 在本地运行CLI
克隆仓库：
```bash
git clone https://github.com/MinhMark123123/m_cli.git
cd m_cli/test_badge_gen

激活CLI本地版本：

dart pub global activate --source path .

运行：

badge-test gen --in=lcov.info

运行测试 🧪

运行所有单元测试：

dart pub global activate coverage
dart test --coverage=coverage
dart pub global run coverage:format_coverage --lcov --in=coverage --out=coverage/lcov.info

查看生成的覆盖率报告，可以使用lcov。

生成覆盖率报告：

genhtml coverage/lcov.info -o coverage/

打开覆盖率报告：

open coverage/index.html

生成徽章图像：

badge-test gen --in=coverage/lcov.info

更多关于Flutter徽章生成插件test_badge_gen的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter徽章生成插件test_badge_gen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


test_badge_gen 是一个用于在 Flutter 应用中生成徽章的插件。它可以帮助你轻松创建各种样式的徽章，例如在图标上显示数字、文本或其他标志。以下是如何使用 test_badge_gen 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 test_badge_gen 依赖：

dependencies:
  flutter:
    sdk: flutter
  test_badge_gen: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 以获取依赖。

2. 导入包

在你的 Dart 文件中导入 test_badge_gen 包：

import 'package:test_badge_gen/test_badge_gen.dart';

3. 使用 Badge 组件

test_badge_gen 提供了一个 Badge 组件，你可以在你的 UI 中使用它来生成徽章。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:test_badge_gen/test_badge_gen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Badge Example'),
        ),
        body: Center(
          child: Badge(
            value: '3', // 徽章上显示的值
            child: Icon(Icons.notifications), // 徽章附加的图标或组件
          ),
        ),
      ),
    );
  }
}

4. 自定义徽章

Badge 组件提供了多种属性来自定义徽章的外观，例如：

  • value: 徽章上显示的值，可以是数字或文本。
  • color: 徽章的颜色。
  • size: 徽章的大小。
  • position: 徽章相对于父组件的位置。
  • padding: 徽章的内边距。
  • borderRadius: 徽章的圆角半径。

以下是一个自定义徽章的示例：

Badge(
  value: 'New',
  color: Colors.red,
  size: 20.0,
  position: BadgePosition.topRight(),
  padding: EdgeInsets.all(5.0),
  borderRadius: BorderRadius.circular(10.0),
  child: Icon(Icons.mail),
)
回到顶部