Flutter日志记录插件app_logger的使用

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

Flutter日志记录插件app_logger的使用

本篇文档将详细介绍如何在Flutter项目中使用app_logger插件来记录异常、HTTP请求和导航日志。

使用

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

dependencies:
  app_logger: ^0.0.5

接下来,在你的Dart文件中导入app_logger包:

import 'package:app_logger/app_logger.dart';

然后初始化插件:

void main() {
  AppLogger.init(
    baseUrl: 'https://example.com',
    httpLog: true,
    navigationLog: true,
    appId: 'example',
    appRunner: () => runApp(const MyApp()),
  );
}

接着,你可以修改插件的配置。例如,设置用户信息:

AppLogger.instance.configuration.setUser(
  AppLoggerUser(id: '123123213123', username: 'Mustafa'),
);

对于导航日志,你需要将NavigationLogger实例添加到MaterialAppnavigatorObservers属性中:

MaterialApp(
  navigatorObservers: [NavigationLogger.instance],
  onGenerateRoute: MyRouteFactory().main.onGenerateRoute,
);

对于API日志,你可以在HTTP请求完成后调用HttpLogger来记录日志:

Future<void> getRequest() async {
  final uri = Uri.https('jsonplaceholder.typicode.com', 'todos/1');
  final res = await http.get(
    uri,
    headers: {"content-type": "application/json"},
  );
  HttpLogger.instance.log(
    url: uri.toString(),
    statusCode: res.statusCode,
    header: {},
    requestBody: {},
    responseBody: res.body,
  );
}

参数

以下是AppLogger.init方法的参数列表及其描述:

参数 描述
baseUrl 基础URL
headers 头信息
callBackFun 日志记录回调函数
onError 错误处理函数
configuration 配置对象
httpLog HTTP日志状态
navigationLog 导航日志状态
killAppOnError 发生错误时是否关闭应用
killAppOnErrorCausedByFlutter 是否由Flutter关闭应用
user 用户信息

完整示例代码

下面是完整的示例代码,展示了如何在Flutter项目中使用app_logger插件。

import 'package:app_logger/app_logger.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;

void main() {
  AppLogger.init(
    baseUrl: 'https://example.com',
    httpLog: true,
    navigationLog: true,
    appId: 'example',
    appRunner: () => runApp(const MyApp()),
  );
}

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  initState() {
    super.initState();
    AppLogger.instance.configuration.setUser(
      AppLoggerUser(id: '123123213123', username: 'Mustafa'),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Logger'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: getRequest, child: const Text('Http Log')),
            ElevatedButton(onPressed: navigationLog, child: const Text('Navigation Log')),
          ],
        ),
      ),
    );
  }

  void navigationLog() {
    // NavigationLogger.instance.log(
    //   const RouteSettings(
    //     name: 'AppLoggerDetailScreen',
    //     arguments: {'userName': 'Mto', 'userId': 1},
    //   ),
    // );
  }

  Future<void> getRequest() async {
    final uri = Uri.https('jsonplaceholder.typicode.com', 'todos/1');
    final res = await http.get(
      uri,
      headers: {"content-type": "application/json"},
    );
    HttpLogger.instance.log(
      url: uri.toString(),
      statusCode: res.statusCode,
      header: {},
      requestBody: {},
      responseBody: res.body,
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用app_logger插件进行日志记录的代码示例。app_logger是一个流行的Flutter插件,用于在应用程序中轻松记录日志。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  app_logger: ^1.1.0  # 请检查最新版本号

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

2. 初始化Logger

在你的应用程序的入口文件(通常是main.dart)中初始化Logger:

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

void main() {
  // 初始化Logger
  Logger.level = LogLevel.verbose; // 设置日志级别
  Logger.init('MyAppLogs.txt'); // 指定日志文件名

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter App Logger Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

3. 使用Logger记录日志

现在你可以在你的应用程序中的任何地方使用Logger来记录日志。例如,在MyHomePage类中:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 记录不同级别的日志
        Logger().v('This is a verbose log');
        Logger().d('This is a debug log');
        Logger().i('This is an info log');
        Logger().w('This is a warning log');
        Logger().e('This is an error log');

        // 记录带有附加信息的日志
        Logger().i('User clicked the button', {'userAction': 'buttonClick'});
      },
      child: Text('Log Some Messages'),
    );
  }
}

4. 查看日志

在Android设备上,你可以通过Android Studio的Logcat查看日志。对于iOS设备,你可以使用Xcode的Console或者通过连接设备到Mac并使用Console.app来查看日志。

此外,app_logger会将日志写入指定的文件(在这个例子中是MyAppLogs.txt),你可以在设备的文件系统或模拟器的文件浏览器中查找这个文件以查看日志内容。

5. 清理日志(可选)

如果你需要在某个时刻清理日志,可以使用Logger.clearLogs()方法:

void clearLogs() {
  Logger.clearLogs();
}

你可以在适当的地方调用这个方法,比如在用户注销或应用程序关闭时。

通过以上步骤,你就可以在Flutter应用程序中有效地使用app_logger插件来记录和管理日志了。

回到顶部