Красочные журналы в приложении Flutter с помощью Talker

Всем привет 👋
Это долгожданное продолжение серии статей о библиотеке Talker 😅.

В этом посте я расскажу вам, как с помощью этой библиотеки настроить цвета и текст ваших логов.

Давайте сделаем это 🚀.

Базовые журналы

1) Создайте приложение или откройте существующее
Вы можете создать консоль dart или приложение flutter.
Talker основан только на dart без зависимости от flutter sdk, поэтому вы можете использовать этот пакет везде 🙂 .

Для примера я создаю консольное приложение dart по умолчанию

2) Добавьте зависимость talker в pubspec.yaml

dependencies:
  talker: ^1.3.0

3) Инициализируем talker в главном файле приложения и делаем простые логи в методе main

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 типов логов.

Но этого может быть недостаточно 🧐.
Хорошо, у Talker есть решение и для этого случая 🥳.

Пользовательские журналы

Например, наше приложение может работать с бэкенд-кодом на стороне сервера через http-запросы. И нам нужно показывать http-логи разным цветом, чтобы выделить их в общем списке сообщений.

1) Для создания пользовательских http логов talker имеет класс TalkerLog, который вы можете расширить с помощью вашей реализации.

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

2) Хорошо, но как выделить этот журнал определенным цветом?
Вы можете переопределить поле pen вашего класса-наследника TalkerLog.

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, чтобы поддержать проект!