Flutter网络请求日志查看插件dio_log_viewer的使用

Flutter网络请求日志查看插件dio_log_viewer的使用

Pub 支持

功能

dio_log_viewer 是一个 dio 辅助插件，用于捕获请求并在应用程序内查看它们。它提供了诸如请求复制和 JSON 展开等功能。

预览

应用预览

开始使用

import 'package:dio_log_viewer/dio_log_viewer.dart';

使用方法

  1. 初始化 dio 并添加拦截器
Dio dio = Dio();
...
dio.interceptors.add(DioLogViewerInterceptor());

DioLogViewerInterceptor 类具有以下参数：

  // enable: true, 默认为 true
  final bool enable;
  // 最大日志数量，默认为 50
  final int maxLogCount;

  DioLogViewerInterceptor({this.enable = true, this.maxLogCount = 50});
  1. 在应用程序入口处显示日志拖动按钮
DioLogViewer.showLogButton(context);

  1. 点击日志按钮后，您将看到被拦截的请求日志

  2. 隐藏日志按钮

DioLogViewer.dismiss();

注意事项

可以通过以下代码获取日志数据 导航到日志页面 <LogViewerListPage()>

Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
  return const LogViewerListPage();
}));

完整示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('dio_log_viewer Demo')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              Dio dio = Dio();
              dio.interceptors.add(DioLogViewerInterceptor());

              // 添加日志按钮
              DioLogViewer.showLogButton(context);

              try {
                await dio.get('https://jsonplaceholder.typicode.com/posts');
              } catch (e) {
                print(e);
              }
            },
            child: Text('发送请求'),
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何初始化 dio，并添加 DioLogViewerInterceptor 拦截器，然后在按钮点击事件中发送请求并显示日志按钮。


更多关于Flutter网络请求日志查看插件dio_log_viewer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络请求日志查看插件dio_log_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


dio_log_viewer 是一个用于查看和记录 Flutter 应用中使用 Dio 进行网络请求的日志插件。它可以帮助开发者更方便地调试和监控网络请求的详细信息。以下是使用 dio_log_viewer 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
  dio_log_viewer: ^1.0.0

然后运行 flutter pub get 来获取依赖。

2. 初始化 Dio 和 DioLogViewer

在你的应用中初始化 Dio 并配置 DioLogViewer。

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

void main() {
  // 初始化 Dio
  final dio = Dio();

  // 添加 DioLogViewer 拦截器
  dio.interceptors.add(DioLogViewerInterceptor());

  runApp(MyApp(dio: dio));
}

class MyApp extends StatelessWidget {
  final Dio dio;

  MyApp({required this.dio});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(dio: dio),
    );
  }
}

3. 使用 Dio 发送网络请求

在你的应用中使用 Dio 发送网络请求。所有请求和响应的日志都会被 DioLogViewer 记录。

class MyHomePage extends StatelessWidget {
  final Dio dio;

  MyHomePage({required this.dio});

  void fetchData() async {
    try {
      final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
      print(response.data);
    } catch (e) {
      print(e);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dio Log Viewer'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: fetchData,
          child: Text('Fetch Data'),
        ),
      ),
    );
  }
}

4. 查看日志

DioLogViewer 提供了一个 UI 界面来查看网络请求的日志。你可以通过调用 DioLogViewer.show(context) 来打开日志查看界面。

你可以在应用的某个按钮或菜单项中触发日志查看界面：

class MyHomePage extends StatelessWidget {
  final Dio dio;

  MyHomePage({required this.dio});

  void fetchData() async {
    try {
      final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
      print(response.data);
    } catch (e) {
      print(e);
    }
  }

  void showLogs(BuildContext context) {
    DioLogViewer.show(context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dio Log Viewer'),
        actions: [
          IconButton(
            icon: Icon(Icons.list),
            onPressed: () => showLogs(context),
          ),
        ],
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: fetchData,
          child: Text('Fetch Data'),
        ),
      ),
    );
  }
}
回到顶部