Flutter网络请求日志插件dio_http_logger的使用

Flutter网络请求日志插件dio_http_logger的使用

一个强大的Dio网络拦截器，提供全面的请求、响应和错误日志记录。

⚡ 截图

⚡ 特性

• 详细日志记录：记录请求方法、URL、头信息、查询参数、请求体、响应状态码、头信息、请求时间、响应时间、请求数据大小、响应数据大小和响应体。
• 错误堆栈跟踪：直接从Dio获取错误请求的堆栈跟踪数据。
• 易于集成：只需几行代码即可将拦截器添加到Dio实例中。

⚡ 安装

在 pubspec.yaml 文件中添加 dio_http_logger：

dio: ">=4.0.0 <6.0.0" // 使用最新版本，如5.6.0。旧版本使用DioError而不是DioException。
.....
dio_http_logger: ^latest_version

⚡ 开始使用

1. 将 DioNetworkLogger.instance.dioNetworkInterceptor 添加到您的Dio对象/实例中。

final client = Dio(); 
client.interceptors.add(DioNetworkLogger.instance.dioNetworkInterceptor!);  

1. 在应用启动或导航开始时设置上下文。

DioNetworkLogger.instance.context = context;  

1. 使用 DioNetworkLogger.instance.overLayButtonWidget 小部件直接导航到库（将其放在应用程序的根视图中，这将在每个屏幕中显示按钮）。

runApp(
    MaterialApp(
      home: Stack(
        children: [
          const MyApp(),
          DioNetworkLogger.instance.overLayButtonWidget
        ],
      ),
    )
);

1. 或者，您可以使用 DioNetworkLogger.instance.startNetworkLoggerScreen() 直接导航到库。

// 在任何回调中使用它
onPressed: () {
  DioNetworkLogger.instance.context = context;
  DioNetworkLogger.instance.startNetworkLoggerScreen();
},

⚡ 推送通知（可选）

这是一个可选功能。如果您希望在触发网络请求或从服务器收到响应时接收本地推送通知。

1. 初始化通知。

void main() async {
  ...
  WidgetsFlutterBinding.ensureInitialized();
  await DioNetworkLogger.instance.initLocalNotifications();
  runApp(
      ...
  );
}

1. 对于iOS配置您的 AppDelegate。

// 其他导入
import flutter_local_notifications

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {

    FlutterLocalNotificationsPlugin.setPluginRegistrantCallback { (registry) in
      GeneratedPluginRegistrant.register(with: registry)}
    GeneratedPluginRegistrant.register(with: self)
    if #available(iOS 10.0, *) {
      UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    }
    return super.application(application, didFinishLaunchingWithOptions:launchOptions)
  }
}

注意： 使用了 flutter_local_notifications: ^17.2.2 插件。如果遇到任何问题，请参阅 flutter_local_notifications 的文档，并不要忘记在GitHub上提交问题。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 dio_http_logger 插件进行网络请求并查看日志。

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:dio_http_logger/dio_logger.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await DioNetworkLogger.instance.initLocalNotifications();
  runApp(
    MaterialApp(
      home: Stack(
        children: [
          const MyApp(),
          DioNetworkLogger.instance.overLayButtonWidget
        ],
      ),
    )
  );
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    DioNetworkLogger.instance.context = context;
    final client = Dio();
    client.interceptors.add(DioNetworkLogger.instance.dioNetworkInterceptor!);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Dio http logger app example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                client.get('https://jsonplaceholder.typicode.com/todos/1');
              },
              child: const Text('发送GET请求')
            ),
            TextButton(
              onPressed: () {
                client.post(
                  'https://jsonplaceholder.typicode.com/posts',
                  data: {
                    'title': '新帖子',
                    'body': '这是新帖子的内容。',
                    'userId': 1,
                  },
                );
              },
              child: const Text('发送POST请求')
            ),
            TextButton(
              onPressed: () {
                client.put(
                  'https://jsonplaceholder.typicode.com/posts/1',
                  data: {
                    'id': 1,
                    'title': '更新后的帖子',
                    'body': '这是更新后帖子的内容。',
                    'userId': 1,
                  },
                );
              },
              child: const Text('发送PUT请求')
            ),
          ],
        ),
      ),
    );
  }
}