Flutter日志记录插件flutter_bug_logger的使用

简介

flutter_bug_logger 是一个简单、漂亮且强大的Flutter日志记录插件。它支持日志级别、文件名和行号，并且可以自定义日志级别的颜色。该插件受到了 logger 的启发。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_bug_logger: ^{LAST_VERSION}

然后运行 flutter pub get 来安装依赖。

使用

初始化

在应用程序启动时初始化 flutter_bug_logger，设置一些配置参数：

import 'package:flutter/material.dart';
import 'package:flutter_bug_logger/flutter_logger.dart';

void main() {
  Logger.init(
    true, // 是否启用日志记录，生产环境下建议设为false
    isShowFile: false, // 是否在IDE中显示文件名
    isShowTime: false, // 是否在IDE中显示时间
    isShowNavigation: true, // 是否在IDE中点击后跳转到打印文件的详细页面
    levelVerbose: 247, // 设置IDE中详细级别的颜色
    levelDebug: 26,
    levelInfo: 28,
    levelWarn: 3,
    levelError: 9,
    phoneVerbose: Colors.white54, // 设置手机或web上的详细级别的颜色
    phoneDebug: Colors.blue,
    phoneInfo: Colors.green,
    phoneWarn: Colors.yellow,
    phoneError: Colors.redAccent,
  );
  
  runApp(const MyApp());
}

日志记录

在应用中记录不同级别的日志：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  void onPressed() {
    Logger.v("hello world\nsecond "); // verbose 级别
    Logger.d("hello world\nsecond time"); // debug 级别
    Logger.i("hello world\nsecond time"); // info 级别
    Logger.w("hello world\nsecond time"); // warn 级别
    Logger.e("hello world\nsecond time", tag: "TAG"); // error 级别
    var json = "{\"name\":\"tom\",\"age\":\"38\",\"son\":{\"name\":\"jerry\",\"age\":\"18\",\"grandson\":{\"name\":\"lily\",\"age\":\"8\"}}}";
    Logger.json(json); // JSON 数据
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Logger"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: onPressed,
          child: Icon(Icons.add),
        ),
        body: Demo(),
      ),
    );
  }
}

在手机上查看日志

在手机上可以通过 ConsoleOverlay 查看日志：

class _DemoState extends State<Demo> {
  @override
  void initState() {
    super.initState();
    // 打开 ConsoleOverlay
    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      ConsoleOverlay.show(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

关闭 ConsoleOverlay：

ConsoleOverlay.remove();

高级用法

修改日志颜色

可以在初始化时修改不同级别的日志颜色：

Logger.init(
  true,
  isShowFile: true,
  isShowTime: true,
  isShowNavigation: true,
  levelVerbose: 247,
  levelDebug: 26,
  levelInfo: 28,
  levelWarn: 3,
  levelError: 9,
  phoneVerbose: Colors.white54,
  phoneDebug: Colors.blue,
  phoneInfo: Colors.green,
  phoneWarn: Colors.yellow,
  phoneError: Colors.redAccent,
);

关闭生产环境的日志

在生产环境中禁用日志记录：

Logger.init(false);

输出效果

不带标签的日志输出

Logger.v("hello world");
Logger.d("hello world");
Logger.i("hello world");
Logger.w("hello world");
Logger.e("hello world");

带标签的日志输出

Logger.e("hello", tag: "TAG");

JSON 支持

var json = "{\"name\":\"tom\",\"age\":\"18\"}";
Logger.json(json);