Colourful logs in Flutter application with Talker
Tags: flutter, dart, ios, webdev
Published: 2022-09-05 20:23:25

Hello everyone 👋
This is a long-awaited continuation of the series of articles about the **[Talker](https://github.com/Frezyx/talker)** library 😅

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


![Talker colored logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zy66yilzxth5ajqa73l.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb5iqmedml3vesprtcy6.png)

2) Add talker dependency in pubspec.yaml

```yaml
dependencies:
  talker: ^1.3.0
```

![Talker dependency](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmna5zr7tzch80igmhfo.png)

3) Init talker in main file of application and make simple logs in main method
```dart
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
![Base talker logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vb8183nhrlx17abp9i9.png)

It already looks good.
Talker can display **8 types of logs** by default.
![All talker base logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olfcosuooja44j35yuhd.png)

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.
```dart
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.
```dart
class HttpLog extends TalkerLog {
  HttpLog(super.message);

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

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

```dart
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
![Custom first example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba7oyalkm2zje31dnytb.png)

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

```dart
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
![Custom second example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qedbheanysnrd0cyy0pv.png)

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](https://github.com/Frezyx/talker/tree/master/examples/).

❤️ Thank you for reading post 
💻 Article example source code [here](https://github.com/Frezyx/talker/tree/master/examples/custom_logs_example) 

Show some ❤️ and [put a star on the GitHub](https://github.com/Frezyx/talker) to support the project!