DEV Community

Stanislav Ilin
Stanislav Ilin

Posted on

Colourful logs in Flutter application with Talker

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.

Talker colored logs

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
Example flutter application

2) Add talker dependency in pubspec.yaml

dependencies:
  talker: ^1.3.0
Enter fullscreen mode Exit fullscreen mode

Talker dependency

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');
}
Enter fullscreen mode Exit fullscreen mode

With this code, the output will be as shown below
Base talker logs

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

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);
}
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

This code will show message like example bellow
Custom first example

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

This code will show message like example bellow
Custom second example

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!

Top comments (7)

Collapse
 
devarshishimpi profile image
Devarshi Shimpi

Thank You!!!

Collapse
 
frezyx profile image
Stanislav Ilin

I will be very happy if my solution helps someone !

Collapse
 
khokon profile image
Khokon M.

Wow! This is awesome work dude.

Collapse
 
frezyx profile image
Stanislav Ilin

A lot of thanks ❀️

Collapse
 
sahan profile image
Sahan

Looks rad πŸ‘Always wanted to give Dart & Flutter! Thanks for sharing

Collapse
 
frezyx profile image
Stanislav Ilin

It's time to try it! Thanks !

Some comments may only be visible to logged-in visitors. Sign in to view all comments.