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

简介

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

添加依赖

在 pubspec.yaml 文件中添加 dio_log 依赖：

dependencies: 
  dio_log: ^2.0.3

或者从 GitHub 获取最新版本：

dio_log:
  git:
    url: git@github.com:flutterplugin/dio_log.git
    ref: v2.0.3

设置 Dio 拦截器

在你的 Dart 代码中设置 DioLogInterceptor：

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

final dio = Dio();

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

显示悬浮按钮

在主页面添加全局的悬浮按钮，用于跳转到日志列表：

import 'package:dio_log/dio_log.dart';

// 显示悬浮按钮
showDebugBtn(context, btnColor: Colors.blue);

// 取消悬浮按钮
dismissDebugBtn();

// 检查悬浮按钮是否显示
debugBtnIsShow();

打开日志列表

你也可以在应用的任何地方打开日志列表：

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

其他可配置参数

你可以根据需要配置一些参数，例如：

• 设置记录日志的最大条数：

  LogPoolManager.getInstance().maxCount = 100;
  

• 自定义错误日志的显示条件：

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

• 禁用日志打印：

  DioLogInterceptor.enablePrintLog = false;
  

示例代码

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

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

void main() {
  final dio = Dio();
  dio.interceptors.add(DioLogInterceptor());
  initHttp(dio); // 初始化HTTP请求工具
  runApp(MyApp());
}

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

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

  final String title;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                showDebugBtn(context, btnColor: Colors.blue);
              },
              child: Text('显示悬浮按钮'),
            ),
            ElevatedButton(
              onPressed: () {
                dismissDebugBtn();
              },
              child: Text('取消悬浮按钮'),
            ),
            ElevatedButton(
              onPressed: _showLogList,
              child: Text('打开日志列表'),
            ),
          ],
        ),
      ),
    );
  }
}

void initHttp(Dio dio) {
  // 初始化HTTP请求工具，可以在这里配置更多选项
  dio.options.baseUrl = 'https://jsonplaceholder.typicode.com';
}

截图

GIF 演示

通过以上步骤和示例代码，你应该能够在 Flutter 应用中成功集成并使用 dio_log 插件来调试和查看 HTTP 请求日志。