Flutter中如何使用dio_log_viewer插件

在Flutter项目中集成了dio_log_viewer插件，但不知道如何正确配置和使用。按照文档添加依赖后，运行时看不到网络请求日志界面。请问具体需要在哪里初始化插件？是否需要额外设置才能显示日志？请求的拦截和日志捕获是自动完成的吗？希望有详细的使用步骤说明。

2 回复

在Flutter项目中使用dio_log_viewer插件：

  1. 添加依赖到pubspec.yaml：
dependencies:
  dio_log_viewer: ^1.0.0
  1. 在main.dart中初始化：
import 'package:dio_log_viewer/dio_log_viewer.dart';

void main() {
  DioLogViewer.init();
  runApp(MyApp());
}
  1. 在需要查看日志的地方调用：
DioLogViewer.show(context);

该插件会自动拦截和显示dio网络请求日志。

更多关于Flutter中如何使用dio_log_viewer插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用dio_log_viewer插件可以方便地查看和管理Dio网络请求的日志。以下是详细步骤：

1. 添加依赖

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

dependencies:
  dio: ^5.0.0  # 确保已安装dio
  dio_log_viewer: ^2.0.0  # 最新版本

运行 flutter pub get 安装。

2. 配置Dio拦截器

在Dio实例中添加 DioLogInterceptor：

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

final dio = Dio();
dio.interceptors.add(DioLogInterceptor());

3. 打开日志查看器

在需要查看日志的地方（如按钮点击事件）调用：

DioLogViewer.open(context);

或使用导航跳转：

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

4. 可选配置

  • 自定义存储路径（默认存储在应用文档目录）：
    DioLogInterceptor(storagePath: '自定义路径');
  • 启用/禁用日志：
    DioLogInterceptor(enabled: false); // 临时关闭

注意事项

  • 仅适用于Debug模式，建议通过条件导入避免在生产环境使用。
  • 支持查看请求/响应头、参数、状态码及响应数据。
  • 可通过滑动删除单条日志，或使用清除按钮清空全部。

通过以上步骤即可集成并使用dio_log_viewer插件监控网络请求。

回到顶部