Flutter徽章生成插件cli_badges的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter徽章生成插件 cli_badges 的使用

cli_badges 是一个用于在命令行界面(CLI)应用程序中生成徽章的小型 Dart 库。本文将介绍如何在 Flutter 项目中使用该插件,并提供完整的示例代码。

特性

  • 简单易用
  • 内置主题
  • 可自定义

安装

首先,在你的 pubspec.yaml 文件中添加 cli_badges 依赖:

dependencies:
  cli_badges: ^1.0.0  # 请根据最新版本号进行修改

然后运行以下命令来安装依赖:

flutter pub get

使用示例

基本用法

导入库并创建一个 Badge 对象:

import 'package:cli_badges/cli_badges.dart';

void main() {
  var failedBadge = Badge(label: 'failed', message: '2', theme: BadgeTheme.red);

  print(failedBadge);
}

更多示例

你可以创建不同类型的徽章,例如捐赠徽章:

var donateBadge = Badge.cyan(label: '❤️ donate', message: 'please?');

print(donateBadge);

你也可以只显示标签:

var onlyLabel = Badge(
    label: '❤️ donate', 
    labelColorCode: 169
);

print(onlyLabel);

组合多个徽章

你可以将多个徽章组合在一起打印:

var failedBadge  = Badge(label: 'failed', message: '2', theme: BadgeTheme.red);
var successBadge = Badge(label: 'success', message: '2').green();
var skippedBadge = Badge.yellow(label: 'skipped',  message: '2');

print(
    Badge.inline([
        failedBadge, 
        skippedBadge, 
        successBadge
    ]),
);

使用内置主题

cli_badges 提供了多种内置主题,例如红色、绿色、蓝色等。以下是三种创建主题徽章的方法:

  1. 直接传递主题到构造函数:
Badge(
    label: 'failed', 
    message: '2', 
    theme: BadgeTheme.red,
);
  1. 使用命名构造函数:
Badge.red(
    label: 'failed', 
    message: '2', 
);
  1. 调用预定义的主题方法:
Badge(...).red();

颜色列表

以下是所有可用的颜色列表:

  • red
  • black
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white
  • brightRed
  • brightBlack
  • brightGreen
  • brightYellow
  • brightBlue
  • brightMagenta
  • brightCyan
  • brightWhite

自定义主题

你可以通过设置背景颜色和文本颜色来自定义主题:

var customBadge = Badge(
    label: 'custom', 
    message: '1', 
    labelBackgroundColor: Colors.blue,
    labelTextColor: Colors.white,
    messageBackgroundColor: Colors.green,
    messageTextColor: Colors.black,
);

print(customBadge);

完整示例 Demo

下面是一个完整的示例程序,展示如何使用 cli_badges 插件生成不同的徽章:

import 'package:cli_badges/cli_badges.dart';
import 'dart:io';

void main() {
  // 创建失败徽章
  var failedBadge = Badge(label: 'failed', message: '2', theme: BadgeTheme.red);

  // 创建成功徽章
  var successBadge = Badge(label: 'success', message: '2').green();

  // 创建跳过徽章
  var skippedBadge = Badge.yellow(label: 'skipped', message: '2');

  // 打印组合徽章
  print('Combined Badges:');
  print(
      Badge.inline([
          failedBadge, 
          skippedBadge, 
          successBadge
      ]),
  );

  // 创建捐赠徽章
  var donateBadge = Badge.cyan(label: '❤️ donate', message: 'please?');
  print('\nDonate Badge:');
  print(donateBadge);

  // 创建自定义徽章
  var customBadge = Badge(
      label: 'custom', 
      message: '1', 
      labelBackgroundColor: Colors.blue,
      labelTextColor: Colors.white,
      messageBackgroundColor: Colors.green,
      messageTextColor: Colors.black,
  );
  print('\nCustom Badge:');
  print(customBadge);

  // 检查是否在终端环境中运行
  if (Platform.isWindows || Platform.isLinux || Platform.isMacOS) {
    print('\nRunning in terminal environment.');
  } else {
    print('\nNot running in terminal environment.');
  }
}

结论

cli_badges 是一个非常实用的 Dart 库,可以帮助你在 CLI 应用程序中快速生成各种徽章。通过简单的 API 和丰富的自定义选项,你可以轻松创建出符合需求的徽章。希望这篇指南对你有所帮助!如果你有任何问题或建议,请访问 GitHub 仓库 并提交 issue。


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

1 回复

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


当然,以下是如何在Flutter项目中使用cli_badges插件来生成徽章的示例代码。请注意,cli_badges实际上是一个用于命令行生成徽章的工具,而不是直接在Flutter应用中使用的插件。然而,我们可以通过调用命令行工具在Flutter项目中生成徽章图像,然后在Flutter应用中使用这些图像。

由于Flutter本身不直接支持调用命令行工具,我们可以借助Dart的Process类来实现这一功能。以下是一个如何在Flutter应用中实现这一点的示例:

  1. 确保已安装cli_badges: 首先,你需要在你的开发环境中安装cli_badges。这通常是通过npm(Node.js的包管理器)完成的。

    npm install -g cli-badges
    
  2. 在Flutter项目中调用命令行生成徽章: 接下来,我们将在Flutter应用中编写代码来调用cli_badges命令行工具。由于Flutter是跨平台的,我们将使用Dart的Process类来执行命令行命令。

    以下是一个示例Flutter项目,其中包含一个按钮,点击该按钮时将调用cli_badges生成徽章,并将生成的徽章图像显示在Image小部件中。

    import 'dart:io';
    import 'dart:convert';
    import 'package:flutter/material.dart';
    import 'package:path_provider/path_provider.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Cli Badges Example'),
            ),
            body: BadgeGenerator(),
          ),
        );
      }
    }
    
    class BadgeGenerator extends StatefulWidget {
      @override
      _BadgeGeneratorState createState() => _BadgeGeneratorState();
    }
    
    class _BadgeGeneratorState extends State<BadgeGenerator> {
      String _badgeImagePath = '';
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: _generateBadge,
                child: Text('Generate Badge'),
              ),
              SizedBox(height: 20),
              _badgeImagePath.isEmpty
                  ? Text('No badge generated yet.')
                  : Image.file(File(_badgeImagePath)),
            ],
          ),
        );
      }
    
      Future<void> _generateBadge() async {
        final directory = await getApplicationDocumentsDirectory();
        final badgePath = '${directory.path}/badge.svg';
    
        // Construct the command to generate the badge
        final command = ['cli-badges', 'subject=build', 'status=passing', '-o', badgePath];
    
        // Run the command
        final result = await Process.run('node', command);
    
        if (result.exitCode == 0) {
          setState(() {
            _badgeImagePath = badgePath;
          });
        } else {
          print('Failed to generate badge: ${result.stderr}');
        }
      }
    }
    

    在这个示例中,我们做了以下几件事:

    • 使用path_provider插件获取应用的文档目录,以便在其中保存生成的徽章图像。
    • 定义一个按钮,当点击该按钮时,将调用_generateBadge函数。
    • _generateBadge函数中,我们构造了一个命令行命令来调用cli-badges,并将生成的徽章保存为SVG文件。
    • 如果命令成功执行,我们将徽章的路径保存在状态中,并在UI中显示该徽章。
  3. 注意事项

    • 确保你的开发环境中已安装Node.js和cli-badges
    • 由于Flutter应用通常运行在模拟器或真实设备上,直接调用命令行工具可能受到限制。在iOS模拟器上,你可能需要将徽章图像预先生成并包含在应用中,或者在macOS主机上运行Flutter应用时调用命令行工具。
    • Android模拟器通常可以访问宿主机的命令行工具,但路径可能有所不同。

这个示例展示了如何在Flutter应用中调用命令行工具生成徽章,并在应用中显示生成的徽章图像。然而,由于平台限制和Flutter的运行环境,这种方法可能不适用于所有情况。在实际开发中,你可能需要根据你的具体需求和目标平台来调整这个示例。

回到顶部