CODEWITHSUNDEEP
colorsdartflutter
Hanggi
Hanggi

Reputation: 715

How to call print() with colorful text to android studio console in flutter

I need a debug output with colorful string, like node.js chalk.

I tried to find the packages, but there is no proper package.

Upvotes: 50

Views: 28459

Answers (11)

rob
rob

Reputation: 1

Improved from above code.

import 'package:flutter/foundation.dart';
import 'dart:developer' as developer;
import 'package:flutter/material.dart';

void printDebug(Object? object) {
  if (kDebugMode) {
    print(object);
  }
}

Map<String, Stopwatch> _statusMaps = Map<String, Stopwatch>();
void startTimer(String name) {
  if (kDebugMode) {
    var _stopwatch = Stopwatch();
    _stopwatch.start();
    var status = '${name} starting\n';
    _statusMaps[name] = _stopwatch;
    printCustom("Timer", status);
  }
}

void stopTimer(String name) {
  if (kDebugMode) {
    Stopwatch _stopwatch;
    if (_statusMaps.containsKey(name)) {
      _stopwatch = _statusMaps[name]!;
      var status = '${name} executed in ${_stopwatch.elapsed}';
      printCustom("Timer", status);
      _statusMaps.remove(name);
    }
  }
}

printCustom(String name, String status, [String charater = '⚡']) {
  debugPrint('\x1B[33m${"$charater $name: $status"}\x1B[0m');
}

enum DebugType { error, info, url, response, statusCode }

prettyPrint(
    {required String tag,
    required dynamic value,
    DebugType type = DebugType.info}) {
  switch (type) {
    case DebugType.statusCode:
      {
        debugPrint('\x1B[33m${"💎 STATUS CODE $tag: $value"}\x1B[0m');
        break;
      }
    case DebugType.info:
      {
        debugPrint('\x1B[32m${"⚡ INFO $tag: $value"}\x1B[0m');
        break;
      }
    case DebugType.error:
      {
        debugPrint('\x1B[31m${"🚨 ERROR $tag: $value"}\x1B[0m');
        break;
      }
    case DebugType.response:
      {
        debugPrint('\x1B[36m${"💡 RESPONSE $tag: $value"}\x1B[0m');
        break;
      }
    case DebugType.url:
      {
        debugPrint('\x1B[34m${"📌 URL $tag: $value"}\x1B[0m');
        break;
      }
  }
}

Upvotes: 0

Suragch
Suragch

Reputation: 511626

I created the screenshots and code below in VS Code, but supposedly it also works in Android Studio now too:

enter image description here

void main() {
  print('This is a normal message.');
  printWarning('This is a warning.');
  printError('This is an error.');
}

void printWarning(String text) {
  print('\x1B[33m$text\x1B[0m');
}

void printError(String text) {
  print('\x1B[31m$text\x1B[0m');
}

ANSI escape code explanation

The ANSI escape code string is pretty confusing if you're not familiar with the format.

enter image description here

Here is the string to turn Hello red:

\x1B[31mHello\x1B[0m

And here it is again with spaces added for clarity between the parts:

\x1B  [31m  Hello  \x1B  [0m

Meaning:

  • \x1B: ANSI escape sequence starting marker
  • [31m: Escape sequence for red
  • [0m: Escape sequence for reset (stop making the text red)

Here are the other colors:

Black:   \x1B[30m
Red:     \x1B[31m
Green:   \x1B[32m
Yellow:  \x1B[33m
Blue:    \x1B[34m
Magenta: \x1B[35m
Cyan:    \x1B[36m
White:   \x1B[37m
Reset:   \x1B[0m

Learn more from these links:

Upvotes: 88

Paras Arora
Paras Arora

Reputation: 703

OUTPUT

enter image description here

USE CASE

            prettyPrint(tag: "Profile", value: "200", type: DebugType.statusCode);
            prettyPrint(tag: "Profile", value: "Wrong password entered", type: DebugType.error);
            prettyPrint(tag: "Profile", value: "google.com", type: DebugType.url);
            prettyPrint(tag: "Profile", value: "key_id", type: DebugType.info);
            prettyPrint(tag: "Profile", value: "API response", type: DebugType.response);

UTILITY

                import 'package:flutter/material.dart';
                
                enum DebugType { error, info, url, response, statusCode }
                
                prettyPrint(
                    {required String tag,
                    required dynamic value,
                    DebugType type = DebugType.info}) {
                  switch (type) {
                    case DebugType.statusCode:
                      {
                        debugPrint('\x1B[33m${"💎 STATUS CODE $tag: $value"}\x1B[0m');
                        break;
                      }
                    case DebugType.info:
                      {
                        debugPrint('\x1B[32m${"⚡ INFO $tag: $value"}\x1B[0m');
                        break;
                      }
                    case DebugType.error:
                      {
                        debugPrint('\x1B[31m${"🚨 ERROR $tag: $value"}\x1B[0m');
                        break;
                      }
                    case DebugType.response:
                      {
                        debugPrint('\x1B[36m${"💡 RESPONSE $tag: $value"}\x1B[0m');
                        break;
                      }
                    case DebugType.url:
                      {
                        debugPrint('\x1B[34m${"📌 URL $tag: $value"}\x1B[0m');
                        break;
                      }
                  }
                }

Upvotes: 2

Dineth Siriwardana
Dineth Siriwardana

Reputation: 85

import 'dart:developer' as developer;


void printW(String text) {
  developer.log('\x1B[33m$text\x1B[0m');
}

void printE(String text) {
  developer.log('\x1B[31m$text\x1B[0m');
}

void printI(String text) {
  developer.log('\x1B[36m$text\x1B[0m');
}

void printS(String text) {
  developer.log('\x1B[32m$text\x1B[0m');
}

Upvotes: 3

Salah Rashad
Salah Rashad

Reputation: 468

I just wanted to share my Logger using the Enhanced Enums.
It works with Flutter 3 and minimum Dart SDK version is 2.17.0.

enum Logger {
  Black("30"),
  Red("31"),
  Green("32"),
  Yellow("33"),
  Blue("34"),
  Magenta("35"),
  Cyan("36"),
  White("37");

  final String code;
  const Logger(this.code);

  void log(dynamic text) =>
      print('\x1B[' + code+ 'm' + text.toString() + '\x1B[0m');
}

Example:

Logger.Green.log("I Love Coffee!");

Upvotes: 9

Paul
Paul

Reputation: 1655

Styles & Colors in any IDE

There is a package that is just as natural as print(). Simply call printRich()instead.

printRich("This is my String", foreground: Colors.blue, italic: true);

printWarning("This is a very important warning"); //Will be yellow

You can change fore- and background colors and adjust text styles (italic, bold, underline, etc.). This package should work with any IDE as long as it uses ANSI (most IDEs can display this, including Android Studio).

Upvotes: 3

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119177

Emoji

You can use colors for text as others mentioned in their answers to have colorful text with a background or foreground color.

But you can use emojis instead! for example, you can use⚠️ for warning messages and 🛑 for error messages.

Or simply use these notebooks as a color:

📕: error message
📙: warning message
📗: ok status message
📘: action message
📓: canceled status message
📔: Or anything you like and want to recognize immediately by color

🎁 Bonus:

This method also helps you to quickly scan and find logs directly in the source code.

But some distributions of Linux’s default emoji font is not colorful by default and you may want to make them colorful, first.

How to open emoji panel?

mac os: control + command + space

windows: win + .

linux: control + . or control + ;

Upvotes: 25

Tigran Hovhannisyan
Tigran Hovhannisyan

Reputation: 21

Currently, Dart console does not parse ANSI colors in Android Studio or IntelliJ Idea. You can check ANSI color support by calling

import dart.io as io
io.stdout.supportsAnsiEscapes

But you can have colorful logs in Android Studio, just open a terminal window in android studio and call

flutter logs

This command attaches the current terminal session to the active flutter session. Use this terminal for logs. Debug tab, for other functionality.

Preview

Upvotes: 2

Denis Sablukov
Denis Sablukov

Reputation: 3690

Though text coloring works perfect in terminal it may not work in debug output of IDE (I've tried Idea/Android Studio and VSCode).

Example of ANSI Escape Codes using:

print('\x1B[94m' + "hahAHaHA!!!" + '\x1B[0m');

Examples of using ansicolor package:

import 'package:ansicolor/ansicolor.dart';

main(List<String> arguments) {
  AnsiPen greenPen = AnsiPen()..green();
  AnsiPen greenBackGroundPen = AnsiPen()..green(bg: true);

  AnsiPen redTextBlueBackgroundPen = AnsiPen()..blue(bg: true)..red();

  AnsiPen boldPen = AnsiPen()..white(bold: true);

  AnsiPen someColorPen = AnsiPen()..rgb(r: .5, g: .2, b: .4);

  print(greenPen("Hulk") + " " + greenBackGroundPen("SMASH!!!"));
  print(redTextBlueBackgroundPen("Spider-Man!!!") + " " + boldPen("Far From Home!!!"));

  print(someColorPen("Chameleon"));
}

PS Came here to find some info on text coloring in terminal, not in debug output of IDE. So I decided to write examples here and do not create separate question with answer.

Upvotes: 6

Panthro
Panthro

Reputation: 3590

I recommend using Grep Console if you don't want to change the way you actually print the characters

You can add a tag like [DEBUG] to your logs and grep console would do the magic for you.

Upvotes: 8

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657148

You need to print escape sequences to get the color effects in terminal output.

See also https://en.wikipedia.org/wiki/ANSI_escape_code

https://pub.dartlang.org/packages/ansicolor is a Dart package that makes this easy.

Upvotes: 24

Related Questions