Printing Colorful Logs in Flutter

Colorful logs in Flutter application

Debugging is an essential part of software development, and logs play a crucial role in understanding what’s happening inside your app. While standard logs in Flutter provide useful information, they can be hard to sift through in a sea of text when debugging complex applications.

Wouldn’t it be great if you could color-code your logs to quickly identify errors, warnings, or other types of information? In this guide, we’ll show you how to print colorful logs in Flutter to make your debugging process more efficient and enjoyable.

Why Use Colorful Logs?

Color-coded logs help by:

• Quickly identifying different log levels (info, warning, error, etc).
• Highlighting critical logs among a flood of information.
• Making your debugging process faster and more organized.

Setting Up Colorful Logs

In Flutter, colorful logs can be achieved by using ANSI escape codes. These codes allow you to customize text colors, styles, and backgrounds in your terminal output. ANSI escape codes are widely supported in Unix-based systems (like macOS and Linux), as well as in modern Windows terminals.

Color Codes for the Console

Here’s a quick reference table for ANSI color codes that can be used to print colorful logs in your Flutter app.

How to Use Color Codes in Dart (Flutter)

Now that you know which color codes to use, let’s see how to apply them in your Flutter app for better debugging. In Dart, you can use the ANSI escape codes directly to style your console output.

Here’s how to use them in practice:

import 'dart:io';

void main() {
  // Print a green info message
  print('\x1b[32m[SUCCESS] Print a green info message!\x1b[0m');

  // Print a yellow warning message
  print('\x1b[33m[WARNING] Print a yellow warning message\x1b[0m');

  // Print a red error message
  print('\x1b[31m[ERROR] Print a red error message\x1b[0m');
}

Combining Text Styles with colors:

You can combine multiple styles such as bold, underline, blinking, and reverse colors along with color codes to create more complex and eye-catching messages.

• \x1b[1m: Bold text.
• \x1b[4m: Underlined text.
• \x1b[5m: Blinking text.
• \x1b[7m: Reversed text (foreground and background swapped).

void main() {
  // Bold red error message
  print('\x1b[1m\x1b[31m[ERROR] Critical failure occurred\x1b[0m');

  // Underlined green info message
  print('\x1b[4m\x1b[32m[INFO] Data loaded successfully\x1b[0m');

  // Blinking yellow warning message
  print('\x1b[5m\x1b[33m[WARNING] Your session is about to expire\x1b[0m');

  // Reversed color (foreground and background swapped)
  print('\x1b[7m[INFO] Application is running\x1b[0m');
}

Pro Tip

It is difficult to keep remembering all this codes. So let’s make your task easy by creating a log utility file to print debugging messages easly.

import 'package:flutter/foundation.dart';

class LoggerUtil {
  static bool isLogEnabled = kDebugMode;

  static void log(String obj) {
    if (isLogEnabled) debugPrint(obj);
  }

  static void info(String message) {
    custom('[INFO] $message', LogColors.blue);
  }

  static void warning(String message) {
    custom('[WARNING] $message', LogColors.yellow);
  }

  static void error(String message) {
    custom('[ERROR] $message', LogColors.red);
  }

  static void success(String message) {
    custom('[SUCCESS] $message', LogColors.green);
  }

  static void custom(
    String message,
    LogColors color, {
    LogStyles logStyles = LogStyles.none,
  }) {
    log('${logStyles.styleCode}${color.colorCode}$message${LogColors.reset.colorCode}');
  }
}

enum LogColors {
  none(''),
  reset('\x1B[0m'),
  red('\x1B[31m'),
  green('\x1B[32m'),
  yellow('\x1B[33m'),
  blue('\x1B[34m'),
  magenta('\x1B[35m'),
  cyan('\x1B[36m'),
  white('\x1B[37m');

  const LogColors(this.colorCode);

  final String colorCode;
}

enum LogStyles {
  none(''),
  bold('\x1B[1m'),
  underline('\x1B[4m'),
  italic('\x1B[3m'),
  reverse('\x1B[7m'),
  framed('\x1B[51m'),
  bgRed('\x1B[41m'),
  bgGreen('\x1B[42m');

  const LogStyles(this.styleCode);

  final String styleCode;
}

void main() {
  LoggerUtil.success('This is Success Log in green color');
  LoggerUtil.error('This is Error Log in red color');
  LoggerUtil.warning('This is Warning Log in yellow color');
  LoggerUtil.info('This is Info Log in blue color');
  LoggerUtil.custom('This is Log in magenta color', LogColors.magenta);
  LoggerUtil.custom("This is Log in blue color with frame 🍃", LogColors.blue, logStyles: LogStyles.framed);
  LoggerUtil.custom('This is Log in red color with frame', LogColors.red, logStyles: LogStyles.reverse);
  LoggerUtil.log('This is Simple Log');
}

Conclusion

By using colorful and styled logs, you can dramatically improve your debugging process in Flutter. Color-coded logs allow you to quickly spot important messages (like errors and warnings), which helps streamline troubleshooting. Here are the key takeaways:

• Colorful logs help differentiate between various types of messages (e.g., errors, warnings, info).
• Text styling (bold, underline, reverse) can add emphasis to critical information.

Next time you’re debugging your Flutter app, consider making your logs more vibrant and organized with colorful output. You’ll find it much easier to navigate through logs and focus on what’s important!

Happy coding and debugging! 🎨🐛

If you like it please clap 👏 to show your love and follow for more helpful tips.