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

简介

dio5_log 是一个用于Dart的HTTP Inspector工具，可以帮助调试HTTP请求。目前实现了基于Dio的HTTP捕获功能。当然，你也可以通过实现自定义的Interceptor来适配其他HTTP客户端。

添加依赖

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  dio5_log: ^5.0.0

或者从GitHub仓库添加特定版本：

diox_log:
  git:
    url: git@github.com:supermebing/diox_log.git
    ref: v3.0.1

设置Dio拦截器

给Dio设置监听以记录HTTP请求和响应日志：

import 'package:dio/dio.dart';
import 'package:dio5_log/dio5_log.dart';

void main() {
  final Dio dio = Dio();
  dio.interceptors.add(DioLogInterceptor());
  
  runApp(MyApp(dio));
}

显示悬浮按钮

为了方便查看日志，在主页面添加全局悬浮按钮，点击后可跳转到日志列表页面：

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

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    // 显示悬浮按钮
    showDebugBtn(context, btnColor: Colors.blue);

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('Check the logs by clicking the floating button!'),
      ),
    );
  }
}

取消悬浮按钮显示：

dismissDebugBtn();

检查悬浮按钮是否显示：

bool isShowing = debugBtnIsShow();

打开日志列表页面

你可以在应用中的任何位置打开日志列表页面：

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => HttpLogListWidget(),
  ),
);

其他配置参数

• 设置最大日志条数：控制日志的最大数量，避免占用过多内存。

  LogPoolManager.getInstance().maxCount = 100;
  

• 自定义错误判定方法：使某些请求消息在日志中以红色字体显示。

  LogPoolManager.getInstance().isError = (res) => res.resOptions == null;
  

• 禁用日志打印：如果你不需要控制台输出日志，可以关闭此功能。

  DioLogInterceptor.enablePrintLog = false;
  

示例代码

下面是一个完整的示例代码，展示了如何集成dio5_log并进行简单的网络请求：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:dio5_log/dio5_log.dart';

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

void initHttp() {
  final Dio dio = Dio();
  dio.interceptors.add(DioLogInterceptor());

  // 配置其他选项...
  LogPoolManager.getInstance().maxCount = 100;
  LogPoolManager.getInstance().isError = (res) => res.resOptions == null;
  DioLogInterceptor.enablePrintLog = true;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo of diox_log',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData.dark(useMaterial3: true),
      themeMode: ThemeMode.system,
      home: MyHomePage(title: 'Demo of diox_log'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    // 显示悬浮按钮
    showDebugBtn(context, btnColor: Colors.blue);

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              final response = await Dio().get('https://jsonplaceholder.typicode.com/posts/1');
              print('Response data: ${response.data}');
            } catch (e) {
              print('Error occurred: $e');
            }
          },
          child: Text('Make a Request'),
        ),
      ),
    );
  }
}

这个示例创建了一个简单的Flutter应用程序，并在按下按钮时执行GET请求，所有网络活动都会被记录并通过悬浮按钮查看。

屏幕截图

希望这些信息能帮助你更好地理解和使用dio5_log插件！如果有任何问题或需要进一步的帮助，请随时提问。