Flutter日志着色插件color_logging的使用

Color Logger

在使用 color_logging 插件时，不建议启用 stackTracking，因为这可能会导致应用构建混乱。

flutter pub add logging
flutter pub add color_logging

显示所有颜色

AnsiColor.showColor()

默认颜色

默认颜色配置可以查看以下链接：

• 更多详情

final Map<Level, AnsiColor> defaultLevelColors = {
  Level.ALL: AnsiColor.fg(8),
  Level.FINEST: AnsiColor.fg(244),
  Level.FINER: AnsiColor.fg(7),
  Level.FINE: AnsiColor.fg(75),
  Level.INFO: AnsiColor.fg(2),
  Level.WARNING: AnsiColor.fg(214),
  Level.SEVERE: AnsiColor.fg(196),
};

配置

在使用 color_logging 插件时，可以通过以下方式设置日志：

// 延伸功能
// 不要使用 stackTracking，因为它可能会混淆构建
Logger.root.level = Level.ALL;
Logger.root.listenOnColorLogger(
  stackTracking: true,
  kIsWeb: true,
  methodCounts: {
    Level.SEVERE: 8,
    Level.FINE: 2,
  },
  levelColors: {
    Level.WARNING: AnsiColor.fg(214),
  },
);

/// 默认为true
Logger.root.listenOnColorLogger();
或者
Logger.root.listenOnColorLogger(false);

在 build 方法中使用日志：

[@override](/user/override)
Widget build(BuildContext context) {
  logger.finest("finest");
  logger.finer("finer");
  logger.fine("fine");
  logger.info("info");
  logger.warning("warning");
  logger.severe("severe\n\nsevere\nsevere");
  logger.logPrettyMap(
    prefix: 'test',
    arguments: {
      "glossary": {
        "title": "example glossary",
        "GlossDiv": {
          "title": "S",
          "GlossList": {
            "GlossEntry": {
              "ID": "SGML",
              "SortAs": "SGML",
              "GlossTerm": "Standard Generalized Markup Language",
              "Acronym": "SGML",
              "Abbrev": "ISO 8879:1986",
              "GlossDef": {
                "para": 
                  "A meta-markup language, used to create markup languages such as DocBook.",
                "GlossSeeAlso": ["GML", "XML"]
              },
              "GlossSee": "markup"
            }
          }
        }
      }
    },
  );
}

与VSCode扩展程序配合使用

使用 VSCode 扩展程序可以帮助更好地管理日志：

• VSCode扩展程序

没有扩展程序

使用扩展程序

使用扩展程序后，可以点击绝对路径跳转到代码行：

完整示例代码

import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'package:color_logging/color_logging.dart';

void main() {
  // 设置日志级别为 ALL
  Logger.root.level = Level.ALL;
  
  // 启用颜色日志监听器
  Logger.root.listenOnColorLogger(
    stackTracking: true,
    kIsWeb: true,
    methodCounts: {
      Level.SEVERE: 8,
      Level.FINE: 2,
    },
    levelColors: {
      Level.WARNING: AnsiColor.fg(214),
    },
  );

  // 运行应用
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final Logger logger = Logger("MyApp");
  MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 记录不同级别的日志
    logger.finest("finest");
    logger.finer("finer");
    logger.fine("fine");
    logger.info("info");
    logger.warning("warning");
    logger.severe("severe\n\nsevere\nsevere");
    logger.logPrettyMap(
      prefix: 'test',
      arguments: {
        "glossary": {
          "title": "example glossary",
          "GlossDiv": {
            "title": "S",
            "GlossList": {
              "GlossEntry": {
                "ID": "SGML",
                "SortAs": "SGML",
                "GlossTerm": "Standard Generalized Markup Language",
                "Acronym": "SGML",
                "Abbrev": "ISO 8879:1986",
                "GlossDef": {
                  "para": 
                    "A meta-markup language, used to create markup languages such as DocBook.",
                  "GlossSeeAlso": ["GML", "XML"]
                },
                "GlossSee": "markup"
              }
            }
          }
        }
      },
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}