使用 Talker 在 Flutter 应用程序中实现彩色日志

大家好👋这是关于Talker
库的系列文章期待已久的续篇😅

在这篇文章中，我将告诉您如何使用这个库自定义日志的颜色和文本。

让我们开始吧🚀

基础日志

1) 创建应用程序或打开一个现有的应用
程序。您可以创建 Dart 控制台或 Flutter 应用程序。Talker
仅基于 Dart，无需 Flutter SDK 依赖，因此您可以在任何地方使用此软件包 🙂

例如我创建默认的 dart 控制台应用程序

2）在pubspec.yaml中添加talker依赖项

dependencies:
  talker: ^1.3.0

3）在应用程序的主文件中初始化 talker，并在主方法中进行简单的日志记录

import 'package:talker/talker.dart';

final talker = Talker();

void main() {
  talker.error('It looks like this button is not working');
  talker.info('The food for lunch has already arrived');
  talker.warning('Something bad has happened, but the app is still working');
}

使用此代码，输出将如下所示

看起来已经不错了。Talker默认
可以显示8 种类型的日志。

但这可能还不够🧐
很好，说话者对这种情况也有解决方案🥳

自定义日志

例如，我们的应用程序可以通过 http 请求与服务器端后端代码交互。我们需要用不同的颜色显示 http 日志，以便在总消息列表中突出显示它们。

1) 为了使自定义 http 日志 talker 具有 TalkerLog 类，您可以通过实现来扩展该类。

class HttpLog extends TalkerLog {
  HttpLog(super.message);
}

2) 好的，但是如何用特定颜色突出显示此日志？
您可以覆盖 TalkerLog 继承类的 pen 字段。

class HttpLog extends TalkerLog {
  HttpLog(super.message);

  @override
  AnsiPen? get pen => AnsiPen()..cyan();
}

3）在主函数中调用talker.logTyped()方法

void main() {
  talker.logTyped(HttpLog('Http response 200'));
}

class HttpLog extends TalkerLog {
  HttpLog(super.message);

  @override
  AnsiPen? get pen => AnsiPen()..cyan();
}

此代码将显示如下示例消息

4) 更多自定义！⚙️
像简单示例一样，我们可以覆盖title字段和generateTextMessage方法

title - 默认消息标题。用于控制台输出和消息过滤。
generateTextMessage() - 此方法会在您在输出控制台中看到日志消息之前创建日志消息。使用此方法，您可以根据需要格式化消息。

让我们看一个例子

void main() {
  talker.logTyped(
    HttpLog(
      'User id is loaded',
      data: {'userId': 1234},
    ),
  );
}

class HttpLog extends TalkerLog {
  HttpLog(
    String message, {
    this.data,
  }) : super(message);

  final dynamic data;

  @override
  AnsiPen get pen => AnsiPen()..cyan();

  @override
  String get title => 'HTTP';

  @override
  String generateTextMessage() {
    var msg = '[$displayTitle] $message';

    if (data != null) {
      final prettyData = encoder.convert(data);
      msg += '\nDATA:$prettyData';
    }
    return msg;
  }
}

此代码将显示如下示例消息

使用 talker，您可以自定义很多其他功能。文章格式不足以完整描述。如果您感兴趣，可以查看项目仓库中的详细示例。

❤️ 感谢您阅读文章
💻文章示例源代码在这里

展现一些❤️并在 GitHub 上放一颗星来支持该项目！

文章来源：https://dev.to/frezyx/colored-logs-in-flutter-application-with-talker-2d25