Colors not working on iOS

[vico-aguado]

Hi!!

I try in iOS and the log show this:

│ #1   _FutureBuilderState.build (package:flutter/src/widgets/async.dart)
flutter: ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\^[[<…>
flutter: │ 🐛 Log message with 2 methods\^[[<…>
flutter: └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────\^[[<…>
flutter: \^[[38;5;12m┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
flutter: \^[[38;5;12m│ 💡 Info message<…>
flutter: \^[[38;5;12m└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
flutter: \^[[38;5;208m┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
flutter: \^[[38;5;208m│ ⚠️ Just a warning!<…>
flutter: \^[[38;5;208m└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
flutter: \^[[38;5;196m┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mTest Error<…>
flutter: \^[[38;5;196m├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄<…>
flutter: \^[[38;5;196m│ #0   MyPage.build.() (package:_app/src/sections/my_page.dart:55:3<…>
flutter: \^[[38;5;196m│ #1   _FutureBuilderState.build (package:flutter/src/widgets/async.dar<…>
flutter: \^[[38;5;196m├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄<…>
flutter: \^[[38;5;196m│ ⛔ Error! Something bad happened<…>
flutter: \^[[38;5;196m└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
flutter: \^[[38;5;199m┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
flutter: \^[[38;5;199m│ #0   MyPage.build.() (package:_app/src/sections/my_page.dart:57:3<…>
flutter: \^[[38;5;199m│ #1   _FutureBuilderState.build (package:flutter/src/widgets/async.dar<…>
flutter: \^[[38;5;199m├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄<…>
flutter: \^[[38;5;199m│ 👾 What a terrible failure log<…>
flutter: \^[[38;5;199m└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>

[simc]

Oh no, I didn't try it on iOS yet.

Do you use Xcode or VSCode?

[vico-aguado]

I use both, but more often VSCode

[simc]

And do you see this problem in Xcode or VSCode?

Xcode does not support colors but in VSCode it should work fine.

[vico-aguado]

I see this problem in both :(

[simc]

Okay thank you! I'll test it.

[simc]

I may take a little longer to fix this problem. In the meantime I added a parameter to the PrettyPrinter to disable colors.

[priezz]

@leisim Any progress on that? Package is really useful, but the output becomes unreadable when debugging on iOS.

[haarts]

I don't think XCode supports colors: https://stackoverflow.com/questions/40583721/print-to-console-log-with-color. The mentioned XcodeColors project seems only to work for XCode < 9.x. Your safest best seems to pass the colors=false arg to the constructor.

[emersonsiega]

I'm using VSCode and have the same problem...

[haarts]

Colors will never work in IDE terminals. None support ANSI escape codes. Passing colors: false to the constructor of PrettyPrinter at least gets rid of the garbage.

[kuhnroyal]

Colors will never work in IDE terminals. None support ANSI escape codes. Passing colors: false to the constructor of PrettyPrinter at least gets rid of the garbage.

That is not completely correct, flutter doctor works with colors in VSCode and IntelliJ. So it seems like some double encoding or escaping is happening.

[robrichardson13]

I'm not sure why, but on one project the colors work perfectly, but on another, they don't work. I haven't figured out the difference yet.

[dav3rin]

Has anyone figured this out?

I went through this article and managed to get colors working in the Debug Console (Vscode MacOS).

Seems the issue is related to bad escaping as suggested by @kuhnroyal.

[aliak00]

This seems to be an issue in the flutter library, not logger: https://github.com/flutter/flutter/issues/20663

[yushihang]

This issue is a bit complex, but we could solve it by changing logger/outputs/console_output.dart to below:

import 'dart:io'; import 'dart:developer' as developer; import 'package:flutter/foundation.dart'; import 'package:idealab/plugins/logger/log_output.dart'; import 'package:idealab/plugins/logger/logger.dart';

const bool _kReleaseMode = kReleaseMode; /// Default implementation of [LogOutput]. /// /// It sends everything to the system console. class ConsoleOutput extends LogOutput { @OverRide void output(OutputEvent event) { if (_kReleaseMode || !Platform.isIOS ) { event.lines.forEach(debugPrint); } else { event.lines.forEach(developer.log); }

} }

[jacobokoenig]

Is there any news on this point? I'd love to have colored outputs using VSCode. Maybe there's a plugin to fix that?

[haarts]

A plugin in VSCode that would enable ASNI colors would work indeed.

[Espero1995]

This issue is a bit complex, but we could solve it by changing logger/outputs/console_output.dart to below:

import 'dart:io'; import 'dart:developer' as developer; import 'package:flutter/foundation.dart'; import 'package:idealab/plugins/logger/log_output.dart'; import 'package:idealab/plugins/logger/logger.dart';

const bool _kReleaseMode = kReleaseMode; /// Default implementation of [LogOutput]. /// /// It sends everything to the system console. class ConsoleOutput extends LogOutput { @OverRide void output(OutputEvent event) { if (_kReleaseMode || !Platform.isIOS ) { event.lines.forEach(debugPrint); } else { event.lines.forEach(developer.log); }

} }

Nice, This method successfully solves the problem of no color in iOS. You should save this file, and run again, then it will take effect.

[strongwill01]

flutter: \^[[38;5;12mThis, eg[statusCode]: 200<…>
flutter: \^[[38;5;12mThis, eg[statusMessage]: OK<…>

This is my message output.

[xiaoLit]

flutter: \^[[38;5;12mThis, eg[statusCode]: 200<…>
flutter: \^[[38;5;12mThis, eg[statusMessage]: OK<…>

This is my message output.

same to me

[Thaimay]

This issue is a bit complex, but we could solve it by changing logger/outputs/console_output.dart to below:

import 'dart:io'; import 'dart:developer' as developer; import 'package:flutter/foundation.dart'; import 'package:idealab/plugins/logger/log_output.dart'; import 'package:idealab/plugins/logger/logger.dart';

const bool _kReleaseMode = kReleaseMode; /// Default implementation of [LogOutput]. /// /// It sends everything to the system console. class ConsoleOutput extends LogOutput { @OverRide void output(OutputEvent event) { if (_kReleaseMode || !Platform.isIOS ) { event.lines.forEach(debugPrint); } else { event.lines.forEach(developer.log); }

} }

Thanks it works!!

[tanhnv-avnon]

Thank you. It works 🚀

[friebetill]

IMHO, not 100% clear, but you have to create an object of the class ConsoleOutput and assign it to the Logger constructor.

import 'dart:developer' as developer;

import 'package:flutter/foundation.dart';
import 'package:logger/logger.dart';
import 'package:universal_io/io.dart';

Logger logger = Logger(output: ConsoleOutput());

/// Extends 'LogOutput' to correctly display console colors on macOS systems.
///
/// The behavior is determined by the application's run mode (Release or Debug)
/// and the operating platform (iOS or non-iOS).
///
/// For more information, see: https://github.com/simc/logger/issues/1#issuecomment-1582076726
class ConsoleOutput extends LogOutput {
  @override
  void output(OutputEvent event) {
    if (kReleaseMode || !Platform.isIOS) {
      event.lines.forEach(debugPrint);
    } else {
      event.lines.forEach(developer.log);
    }
  }
}

[colbymaloy]

not sure why but this works, thanks! colors worked on android but not iOS. this fixes the logs on IOS. thanks

IMHO, not 100% clear, but you have to create an object of the class ConsoleOutput and assign it to the Logger constructor.

import 'dart:developer' as developer;

import 'package:flutter/foundation.dart';
import 'package:logger/logger.dart';
import 'package:universal_io/io.dart';

Logger logger = Logger(output: ConsoleOutput());

/// Extends 'LogOutput' to correctly display console colors on macOS systems.
///
/// The behavior is determined by the application's run mode (Release or Debug)
/// and the operating platform (iOS or non-iOS).
///
/// For more information, see: https://github.com/simc/logger/issues/1#issuecomment-1582076726
class ConsoleOutput extends LogOutput {
  @override
  void output(OutputEvent event) {
    if (kReleaseMode || !Platform.isIOS) {
      event.lines.forEach(debugPrint);
    } else {
      event.lines.forEach(developer.log);
    }
  }
}