Colourful logs in Flutter application with Talker

#flutter #dart #ios #webdev

Hello everyone 👋
This is a long-awaited continuation of the series of articles about the Talker library 😅

In this post I will tell you how to customize colors and text of your logs using this library.

Let's do this 🚀

Base logs

1) Create application or open an existed
You can create dart console or flutter application.
Talker is based only on dart without flutter sdk dependency therefore you can use this package everywhere 🙂

For example I create default dart console application

2) Add talker dependency in pubspec.yaml

dependencies:
  talker: ^1.3.0

3) Init talker in main file of application and make simple logs in main method

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');
}

With this code, the output will be as shown below

It already looks good.
Talker can display 8 types of logs by default.

But that may not be enough 🧐
Good, talker have solution for this cases too 🥳

Custom logs

For example our application can work with server side backend code via http-requests. And we need to show http logs with different color to highlight them in the total list of messages.

1) For make custom http logs talker have TalkerLog class that you can extends with your realization.

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

2) OK, but how to highlight this log with a specific color?
You can override pen field of your TalkerLog heir class.

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

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

3) And in main function call talker.logTyped() method

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

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

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

This code will show message like example bellow

4) More customization! ⚙️
Like simple example we can override title field and generateTextMessage method

title - Default message title. That used for console output and messages filtering.
generateTextMessage() - this method creates log messages before you see it in output console. With this method you can format your messages as you want.

Let's see in example

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;
  }
}

This code will show message like example bellow

With talker you can customize a lot of other things. The article format is not enough for the entire description. If you are interested, you can look at the detailed examples in the project repository.

❤️ Thank you for reading post
💻 Article example source code here

Show some ❤️ and put a star on the GitHub to support the project!