Flutter日志查看插件logger_flutter_viewer的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter日志查看插件logger_flutter_viewer的使用

该插件是对 logger 的扩展。你可以在任何 Flutter 应用中添加它。只需摇晃手机即可显示控制台。

该插件是从 logger_flutter 克隆而来,并进行了一些更新:

开始使用

首先,你需要在你的项目中引入 loggerlogger_flutter_viewer 包。你可以在 pubspec.yaml 文件中添加以下依赖项:

dependencies:
  flutter:
    sdk: flutter
  logger: ^1.0.0 # 请根据实际情况选择合适的版本
  logger_flutter_viewer: ^1.0.0 # 请根据实际情况选择合适的版本

然后,在你的应用中配置日志输出:

import 'package:logger/logger.dart';
import 'package:logger_flutter_viewer/logger_flutter_viewer.dart';

class ScreenOutput extends LogOutput {
  [@override](/user/override)
  void output(OutputEvent event) {
    LogConsole.output(event);
  }
}

var logger = Logger(
    printer: PrettyPrinter(printTime: true, colors: true, printEmojis: true),
    output: ScreenOutput());

接下来,在你的主函数中调用日志记录方法:

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

void log() {
  logger.d("This is a debug message");

  logger.i("Just a info message");

  logger.w("This is a warning!");

  logger.e("Error! Something bad happened", "Test Error");

  logger.v({"key": 5, "value": "something"});

  Future.delayed(const Duration(seconds: 5), log);
}

最后,将 LogConsoleOnShake 组件添加到你的应用中:

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LogConsoleOnShake(
          dark: false,
          child: Center(
            child: Text("Shake Phone to open Console."),
          ),
        ),
      ),
    );
  }
}

这样,当你摇晃设备时,就会弹出一个控制台窗口来显示日志信息。

完整示例代码

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

import 'package:logger/logger.dart';
import 'package:logger_flutter_viewer/logger_flutter_viewer.dart';

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

var logger = Logger(
    printer: PrettyPrinter(printTime: true, colors: true, printEmojis: true),
    output: ScreenOutput());

void log() {
  // 记录调试消息
  logger.d("This is a debug message");

  // 记录信息消息
  logger.i("Just a info message");

  // 记录警告消息
  logger.w("This is a warning!");

  // 记录错误消息
  logger.e("Error! Something bad happened", "Test Error");

  // 记录详细消息
  logger.v({"key": 5, "value": "something"});

  // 每隔5秒重新调用log方法
  Future.delayed(const Duration(seconds: 5), log);
}

class ScreenOutput extends LogOutput {
  [@override](/user/override)
  void output(OutputEvent event) {
    LogConsole.output(event);
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LogConsoleOnShake(
          dark: false,
          child: Center(
            child: Text("Shake Phone to open Console."),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter日志查看插件logger_flutter_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日志查看插件logger_flutter_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用logger_flutter_viewer插件来查看日志的示例代码。这个插件允许你在Flutter应用中方便地查看和调试日志。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加logger_flutter_viewer的依赖:

dependencies:
  flutter:
    sdk: flutter
  logger_flutter_viewer: ^x.y.z  # 请替换为最新版本号

2. 导入插件并配置Logger

接下来,在你的Dart文件中导入插件,并配置Logger。通常,你会在应用的入口文件(如main.dart)中进行这些配置。

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

void main() {
  // 初始化Logger
  final logger = Logger(
    printer: MultiLevelPrinter({
      'DEBUG': (message, error, stacktrace) =>
          print(message),  // 在控制台打印DEBUG级别的日志
      'INFO': (message, error, stacktrace) =>
          print(message),  // 在控制台打印INFO级别的日志
      'WARNING': (message, error, stacktrace) =>
          print(message),  // 在控制台打印WARNING级别的日志
      'ERROR': (message, error, stacktrace) =>
          print("${message}\n${stacktrace}"),  // 在控制台打印ERROR级别的日志
      'WTF': (message, error, stacktrace) =>
          print("${message}\n${stacktrace}"),  // 在控制台打印WTF级别的日志
    }),
    level: Level.all,  // 设置日志级别
  );

  // 初始化LoggerFlutterViewer
  runApp(
    LoggerFlutterViewer(
      child: MyApp(logger: logger),
      logger: logger,
    ),
  );
}

class MyApp extends StatelessWidget {
  final Logger logger;

  MyApp({required this.logger});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(logger: logger),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final Logger logger;

  MyHomePage({required this.logger});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 使用Logger记录一些日志
    widget.logger.d('This is a debug message');
    widget.logger.i('This is an info message');
    widget.logger.w('This is a warning message');
    widget.logger.e('This is an error message', null, StackTrace.current());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Logger Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You can open the drawer to view the logs.',
            ),
          ],
        ),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Logger Drawer'),
            ),
            ListTile(
              title: Text('View Logs'),
              onTap: () {
                // 打开LoggerViewer页面
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => LoggerViewerPage(logger: widget.logger)),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class LoggerViewerPage extends StatelessWidget {
  final Logger logger;

  LoggerViewerPage({required this.logger});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Log Viewer'),
      ),
      body: LoggerViewer(
        logger: logger,
      ),
    );
  }
}

3. 运行应用

现在你可以运行你的Flutter应用,并通过导航抽屉(Drawer)中的“View Logs”选项查看日志。

注意事项

  • 确保你已经正确安装了所有依赖项,并运行了flutter pub get
  • 根据需要调整Logger的配置,如日志级别和输出格式。
  • 插件的具体使用方式和API可能会随着版本更新而变化,请参考插件的官方文档获取最新信息。

这个示例展示了如何在Flutter项目中集成logger_flutter_viewer插件,并通过Logger记录和管理日志。希望这对你有所帮助!

回到顶部