Flutter日志管理插件diox_log的使用

Flutter日志管理插件diox_log的使用

diox_log 是一个为 Dart 编程语言设计的 HTTP 检查器工具，主要用于调试 HTTP 请求。目前它实现了基于 dio 的 HTTP 捕获功能。当然，你可以通过自己实现 Interceptor 来替代 DiologInterceptor，以适配其他 HTTP 客户端。

添加依赖

首先，在你的 pubspec.yaml 文件中添加 diox_log 依赖：

dependencies:
  diox_log : ^3.0.2

在dio中设置拦截器

接下来，在你的 dio 实例中添加 DioLogInterceptor 拦截器：

import 'package:dio/dio.dart';
import 'package:diox_log/dio_log_interceptor.dart';

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

在主页面添加悬浮按钮

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

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

void showDebugBtn(BuildContext context, {Color btnColor = Colors.blue}) {
  // 显示悬浮按钮
}

void dismissDebugBtn() {
  // 取消悬浮按钮
}

bool debugBtnIsShow() {
  // 返回悬浮按钮展示状态
  return true; // 示例返回值
}

如果你希望在特定位置打开日志列表，可以使用 Navigator：

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

其他可配置参数

你还可以配置一些其他的参数来调整日志管理的行为，例如设置最大日志条数，定义哪些请求应被视为错误，以及是否禁用日志打印等：

/// 设置记录日志的最大条数
LogPoolManager.getInstance().maxCount = 100;

/// 添加自定义的日志错误判断逻辑
LogPoolManager.getInstance().isError = (res) => res.resOptions == null;

/// 禁用日志打印
DioLogInterceptor.enablePrintLog = false;

截图

以下是 diox_log 的截图展示：

gif演示

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 diox_log 插件：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:diox_log/dio_log_interceptor.dart';
import 'package:diox_log/http_log_list_widget.dart';

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo of diox_log',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Demo of diox_log'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  void _navigateToLogList() {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => HttpLogListWidget(),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _navigateToLogList,
          child: Text('查看日志'),
        ),
      ),
    );
  }
}