Show clean log messages in Flutter using logger
Tags: flutter, dart, programming, mobile
Published: 2019-11-08 13:59:41

---
title: Show clean log messages in Flutter using logger
published: true
description: Add clean log message to flutter app
tags: flutter,dart,programming,mobile
cover_image: https://miro.medium.com/max/1280/1*-Hf2_5smeknW8wcXAJr1bw.png
canonical_url: https://mightytechno.com/clean-and-better-logs-in-flutter-using-logger/
---


Logging is one of the crucial parts when comes to identifying the issues in your Flutter app. But in the current flutter SDK, identify the actual log messages is kind of hard. Because all the things are mix in together in the terminal and it hard to find logs added by ourself and the logs created by the application itself. Hope google will provide better log mechanism for a flutter. Until that, we have a solution, Logger.
 

Logger provides a nice, clean and easy way of adding the logs to your Flutter application and it actually really beautiful. Without further delay let’s jump into the implementation

##Implementation

First, add the plugin to your pubspec.yaml and press save to type flutter pub get to install the plugin to your flutter app

```dart
logger: ^0.7.0+2
```

Next import the plugin to the dart file where are you going to use this plugin.

```dart
import 'package:logger/logger.dart';
```

Next, create an instance of Logger class and call one of the logging methods to shows the actual logs. There are multiple log methods are available based on the conditions. Those are called as levels.

```dart
var logger = Logger();
logger.d("Debug message");
logger.e("Error message");
logger.i("Info message");
logger.v("Verbose message");
logger.w("Warning message");
logger.wtf("WTF message");
```

These are available levels and based on the level, it will change the colour and other related parameters.

**Verbose** -Show detail of logging than the usual one
**debug**  -Use when log for debugging purpose      
**info** - Log info                            
**warning** - Log warning messages                     
**error** - Log error messages                       
**wtf**	- You know it right?                       


Based on the method you used, the output will be like this.

![alt text](https://mightytechno.com/wp-content/uploads/2019/10/flutter-logger-1-768x438.png "Flutter logs")


Pretty nice right?

Logger class also provide flexibility to change the look and feel of the logs based on your preference. For that, we can simply use Prettyprint instance and it provides the following customization

**colors** - Show colorful logs
**errorMethodCount** - No of error methods need to show
**printEmojis** - Show emoji in log
**printTime** -	Show print time
**lineLength** - Divider length
**methodCount** - No of methods in Stacktrace

```dart
var logger = Logger(printer: PrettyPrinter(
      colors: true,
      errorMethodCount: 1,
      printEmojis: true,
      printTime: true,
      lineLength: 80,
      methodCount: 0
    ));
```

After the customization, the output will be like this

![alt text](https://mightytechno.com/wp-content/uploads/2019/10/flutter-custom-log.png "Flutter logs")

##Add custom style to Log

Adding more customization is also possible by adding a new implementation for LogPrinter. First, create a new class and extends LogPrinter and override the log method. When you call any of the log method this override method will be called. In here we can get an event as a parameter of the log method and it contains Level, Message, Error and Stacktrace.

```dart
class CustomLog extends LogPrinter{

  @override
  void log(LogEvent event) {
    println('${event.message}' );
  }
}
```

If you want to add emojit also you can get those from levelEmojis static object in PrettyPrinter class like this.

```dart
var emoji = PrettyPrinter.levelEmojis[event.level];
```

##Filter the Logs
In case if you want to show certain logs only, you can add a custom filter to the logger. Create class and extend LogFilter and override the shouldLog method. In here if we return true it will show all logs. As an example, if we want to hide warning logs you have to modify the code like below.

```dart
class CustomFilter extends LogFilter{
  
  @override
  bool shouldLog(LogEvent event) {
    return event.level != Level.warning;
  }
}
```

Now you can use these methods as your need for your next flutter application to show logs in a nice and clean way.

Check the Video for More

<a href="https://www.youtube.com/watch?v=GfCVLd7Zumg" target="_blank"><img src="http://img.youtube.com/vi/GfCVLd7Zumg/0.jpg" alt="Flutter logs" width="100%" height="180" border="10" /></a>

Originally published at [mightytechno](https://mightytechno.com/clean-and-better-logs-in-flutter-using-logger/) on October 1, 2019.

Connect with me - [Instagram](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Twitter](https://twitter.com/mightytechno)