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!
Top comments (7)
Thank You!!!
I will be very happy if my solution helps someone !
Wow! This is awesome work dude.
A lot of thanks β€οΈ
Looks rad πAlways wanted to give Dart & Flutter! Thanks for sharing
It's time to try it! Thanks !
Some comments may only be visible to logged-in visitors. Sign in to view all comments.