Flutter日志显示插件flutter_log_overlay的使用

在本教程中，我们将展示如何使用flutter_log_overlay插件来显示Flutter应用的日志信息。这个插件允许你在应用运行时查看详细的日志输出，这对于调试和监控应用的行为非常有用。

使用方法

初始化插件

首先，你需要在应用启动时初始化flutter_log_overlay插件。这通常在你的主页面或初始页面中完成。

[@override](/user/override)
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    FlutterLogOverlay.init(context: context);
  });
}

显示日志面板

要显示日志面板，你可以调用FlutterLogOverlay.show()方法。

ElevatedButton(
  onPressed: FlutterLogOverlay.show,
  child: Text('显示日志'),
)

自定义日志记录器

为了更好地控制日志输出，你可以创建一个自定义的日志记录器。这里我们创建了一个名为MyLogger的类，并重写了其log方法以包含额外的日志信息。

final sLog = MyLogger(
  printer: PrettyPrinter(
    methodCount: 0,
    errorMethodCount: 0,
    printEmojis: false,
    printTime: true,
  ),
);

class MyLogger extends Logger {
  LogFilter? filter;
  LogPrinter? printer;
  LogOutput? output;
  Level? level;

  MyLogger({
    this.filter,
    this.printer,
    this.output,
    this.level,
  }) : super(
          filter: filter,
          printer: printer,
          output: output,
          level: level,
        );

  [@override](/user/override)
  void log(
    Level level,
    dynamic message, [
    dynamic error,
    StackTrace? stackTrace,
  ]) {
    _startTime = DateTime.now();
    FlutterLogOverlay.addLog(
      isCore: level == Level.error,
      content: [
        getTime(),
        "--------------------",
        ((printer ?? PrettyPrinter()) as PrettyPrinter)
            .stringifyMessage(message),
      ],
    );
    super.log(
      level,
      message,
      error != null || stackTrace != null
          ? [
              error,
              stackTrace,
            ]
          : null,
    );
  }

  DateTime? _startTime;

  String getTime() {
    var now = DateTime.now();
    var year = _fourDigits(now.year);
    var month = _twoDigits(now.month);
    var day = _twoDigits(now.day);
    var h = _twoDigits(now.hour);
    var min = _twoDigits(now.minute);
    var sec = _twoDigits(now.second);
    var ms = _threeDigits(now.millisecond);
    var timeSinceStart = now.difference(_startTime!).toString();
    return '$year-$month-$day $h:$min:$sec.$ms (+$timeSinceStart)';
  }

  String _fourDigits(int n) {
    if (n >= 1000) return '$n';
    if (n >= 100) return '0$n';
    if (n >= 10) return '00$n';
    return '000$n';
  }

  String _threeDigits(int n) {
    if (n >= 100) return '$n';
    if (n >= 10) return '0$n';
    return '00$n';
  }

  String _twoDigits(int n) {
    if (n >= 10) return '$n';
    return '0$n';
  }
}

添加手势识别

你还可以添加手势识别功能，以便通过滑动手势来显示日志面板。

[@override](/user/override)
Widget build(BuildContext context) {
  return GestureDetector(
    onPanEnd: FlutterLogOverlay.showOverlayPan,
    behavior: HitTestBehavior.translucent,
    child: const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FirstPgae(),
    ),
  );
}

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_log_overlay插件。

import 'package:flutter/material.dart';
import 'package:flutter_log_overlay/flutter_log_overlay.dart';
import 'package:logger/logger.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanEnd: FlutterLogOverlay.showOverlayPan,
      behavior: HitTestBehavior.translucent,
      child: const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: FirstPgae(),
      ),
    );
  }
}

///first page
class FirstPgae extends StatefulWidget {
  const FirstPgae({
    super.key,
  });

  [@override](/user/override)
  State<FirstPgae> createState() => _FirstPgaeState();
}

class _FirstPgaeState extends State<FirstPgae> {
  int _counter = 0;

  void _incrementCounter() {
    sLog.i('first page add:$_counter');
    _counter++;
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      FlutterLogOverlay.init(context: context);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('first page'),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const SecondPage(),
                ),
              );
            },
            icon: const Icon(Icons.navigate_next),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            ElevatedButton(
              onPressed: FlutterLogOverlay.show,
              child: Text('显示日志'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

///second page
class SecondPage extends StatefulWidget {
  const SecondPage({super.key});

  [@override](/user/override)
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  int _counter = 0;

  void _incrementCounter() {
    sLog.i('second page add:$_counter');
    _counter++;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('second page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            ElevatedButton(
              onPressed: FlutterLogOverlay.show,
              child: Text('显示日志'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

final sLog = MyLogger(
  printer: PrettyPrinter(
    methodCount: 0,
    errorMethodCount: 0,
    printEmojis: false,
    printTime: true,
  ),
);

///类方法重构，增加FlutterLogOverlay.addLog打印日志
class MyLogger extends Logger {
  LogFilter? filter;
  LogPrinter? printer;
  LogOutput? output;
  Level? level;

  MyLogger({
    this.filter,
    this.printer,
    this.output,
    this.level,
  }) : super(
          filter: filter,
          printer: printer,
          output: output,
          level: level,
        );

  [@override](/user/override)
  void log(
    Level level,
    dynamic message, [
    dynamic error,
    StackTrace? stackTrace,
  ]) {
    _startTime = DateTime.now();
    FlutterLogOverlay.addLog(
      isCore: level == Level.error,
      content: [
        getTime(),
        "--------------------",
        ((printer ?? PrettyPrinter()) as PrettyPrinter)
            .stringifyMessage(message),
      ],
    );
    super.log(
      level,
      message,
      error != null || stackTrace != null
          ? [
              error,
              stackTrace,
            ]
          : null,
    );
  }

  DateTime? _startTime;

  String getTime() {
    var now = DateTime.now();
    var year = _fourDigits(now.year);
    var month = _twoDigits(now.month);
    var day = _twoDigits(now.day);
    var h = _twoDigits(now.hour);
    var min = _twoDigits(now.minute);
    var sec = _twoDigits(now.second);
    var ms = _threeDigits(now.millisecond);
    var timeSinceStart = now.difference(_startTime!).toString();
    return '$year-$month-$day $h:$min:$sec.$ms (+$timeSinceStart)';
  }

  String _fourDigits(int n) {
    if (n >= 1000) return '$n';
    if (n >= 100) return '0$n';
    if (n >= 10) return '00$n';
    return '000$n';
  }

  String _threeDigits(int n) {
    if (n >= 100) return '$n';
    if (n >= 10) return '0$n';
    return '00$n';
  }

  String _twoDigits(int n) {
    if (n >= 10) return '$n';
    return '0$n';
  }
}