Flutter日志记录插件retro_logger的使用

Flutter日志记录插件retro_logger的使用

🚧 警告：开发进行中 🚧

此包正处于早期开发阶段，可能会引入破坏性更改。

Retro Logger

retro_logger 是一个轻量级的 Dart 包，为 Dart 和 Flutter 应用程序提供了一种复古风格的日志系统。它允许您以不同的级别记录消息，并使用预构建的小部件显示它们，使调试和监控更加简单且视觉上更具吸引力。

功能

• 多种日志级别：支持各种日志级别，如信息、警告、错误、成功、网络、UI、API 等。
• 复古风格小部件：提供预构建的小部件以复古风格显示日志。
• 过滤和搜索：轻松按类型过滤日志并按关键字搜索。
• 基准测试工具：包括同步和异步函数的基准测试工具。
• 轻量级：设计易于集成，不会增加显著开销。

示例

实时演示: https://retro-logger.web.app/

开始使用

安装

将 retro_logger 添加到您的 pubspec.yaml 文件：

使用 Flutter:

flutter pub add retro_logger

或者手动添加依赖：

dependencies:
  retro_logger: ^0.0.1

然后运行：

flutter pub get

先决条件

• Dart SDK: ^3.5.2
• Flutter: >=1.17.0

使用方法

记录消息

要记录消息，请导入 retro_logger 包并使用 Logger 类：

import 'package:retro_logger/retro_logger.dart';

void main() {
  // 记录不同级别的日志消息
  Logger.success('This is a success message', name: 'Main');
  Logger.info('This is an info message', name: 'Main');
  Logger.warning('This is a warning message', name: 'Main');
  Logger.error('This is an error message', name: 'Main');
}

注意：name 参数是一个字符串，用于标识日志来源，便于追踪日志。

显示日志

使用 LogListWidget

要使用预设列表视图显示日志，请使用 LogListWidget：

import 'package:flutter/material.dart';
import 'package:retro_logger/retro_logger.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Retro Logger Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Retro Logger Example'),
        ),
        body: const LogListWidget(), // 使用 LogListWidget 显示日志
      ),
    );
  }
}

使用 LogManagerWidget 自定义

如果需要自定义日志显示，可以使用 LogManagerWidget：

import 'package:flutter/material.dart';
import 'package:retro_logger/retro_logger.dart';

class CustomLogWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LogManagerWidget(
      builder: (context, logs) {
        return ListView.builder(
          itemCount: logs.length,
          itemBuilder: (context, index) {
            final log = logs[index];
            return ListTile(
              title: Text(log.message),
              subtitle: Text(log.name),
              leading: Icon(Icons.bug_report, color: Logger.getColor(log.level)), // 根据日志级别设置图标颜色
            );
          },
        );
      },
    );
  }
}

访问 LogManager 实例

对于高级日志控制，可以直接与 LogManager 单例交互：

final LogManager logManager = LogManager.instance;

// 手动添加日志
logManager.addLog(Log(
  name: 'CustomName',
  level: 'info',
  message: 'This is a custom log message',
  type: LogType.other,
));

// 清除所有日志
logManager.clearLogs();

// 按类型过滤日志
logManager.filterLogsByTypes({LogType.error, LogType.warning});

// 搜索日志
logManager.searchLogs('search query');

过滤和搜索日志

LogListWidget 内置了过滤和搜索功能：

• 按日志类型过滤：点击搜索栏中的过滤图标选择要显示的日志类型。
• 按关键字搜索：在搜索栏中输入关键字以筛选包含特定关键字的日志。

基准测试函数

使用 Logger 的基准测试工具测量函数执行时间：

同步函数

Logger.benchmark(() {
  // your code here
}, (String elapsedTime) {
  Logger.timestamp(
    'Benchmark completed in $elapsedTime',
    name: '_simulateLogs',
  );
});

异步函数

await Logger.benchmarkAsync(() async {
  // your code here
}, (String elapsedTime) {
  Logger.timestamp(
    'Benchmark completed in $elapsedTime',
    name: '_simulateLogs',
  );
});

注意：基准测试结果将以 timestamp 日志级别记录。

完整示例 Demo

以下是一个完整的示例应用程序，展示如何使用 retro_logger：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:retro_logger/retro_logger.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const LogScreen(),
    );
  }
}

class LogScreen extends StatefulWidget {
  const LogScreen({super.key});

  [@override](/user/override)
  State<LogScreen> createState() => _LogScreenState();
}

class _LogScreenState extends State<LogScreen> {
  [@override](/user/override)
  void initState() {
    super.initState();
    _simulateLogs(); // 模拟生成一些日志
  }

  Future<void> _simulateLogs() async {
    // 列出日志类型及对应的消息
    final logMessages = [
      () => Logger.network('This is a network log', name: '_simulateLogs'),
      () => Logger.button('This is a button log', name: '_simulateLogs'),
      () => Logger.database('This is a database log', name: '_simulateLogs'),
      () => Logger.ui('This is a UI log', name: '_simulateLogs'),
      () => Logger.api('This is an API log', name: '_simulateLogs'),
      () => Logger.other('This is an other log', name: '_simulateLogs'),
      () => Logger.error('This is an error log', name: '_simulateLogs'),
      () => Logger.warning('This is a warning log', name: '_simulateLogs'),
      () => Logger.success('This is a success log', name: '_simulateLogs'),
      () => Logger.info('This is an info log', name: '_simulateLogs'),
      () => Logger.fatal('This is a fatal log', name: '_simulateLogs'),
      () => _benchmarkedLog(),
    ];

    // 循环遍历日志消息
    for (var logMessage in logMessages) {
      await Future.delayed(const Duration(milliseconds: 100), () {
        logMessage();
      });
    }
  }

  void _benchmarkedLog() {
    Logger.benchmarkAsync(
      () async {
        await Future.delayed(const Duration(milliseconds: 500), () {
          if (!mounted) return;
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Benchmark completed')),
          );
        });
      },
      (String elapsedTime) {
        Logger.timestamp(
          'Benchmark completed in $elapsedTime',
          name: '_simulateLogs',
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(),
      child: Scaffold(
        appBar: AppBar(title: const Text('Logs')),
        body: const SafeArea(child: LogTabView()), // 使用 LogTabView 显示日志
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Logger.info(
              [
                'This is an info log',
                'with multiple lines',
                'and json data\n\n'
                    '{"key": "value", "list": [1, 2, 3], "nested": {"key": "value"}, "bool": true}, "null": null',
              ],
              name: 'FloatingActionButton',
            );
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}