Colored 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 beautiful 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

  talker: ^1.3.0

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

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 {

  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 {

  AnsiPen? get pen => AnsiPen()..cyan();

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() {
      'User id is loaded',
      data: {'userId': 1234},

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

  final dynamic data;

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

  String get title => 'HTTP';

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

😌 And keep expecting posts about other talker chips.
Believe me, there are a lot of them left !

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

How to undo a git pull

Next Post

Failed my way to 🥑developcado🥑

Related Posts