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

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

简单地dio网络日志插件用于检查HTTP请求，该插件是从当前dio logger包修改而来。添加了一些实用工具以使日志记录更加容易。

🌌 预览

Home	History	Request	Response

🔎 功能

• 搜索日志
• 可读的JSON格式（使用JsonViewer）
• 通过剪贴板共享日志

🚀 入门指南

1. 使用以下命令安装dio_network_logger：

   flutter pub add dio_network_logger
   

2. 将DioNetworkLogger拦截器添加到Dio客户端：

   final String url = 'https://jsonplaceholder.typicode.com';
   final Dio dio = Dio(BaseOptions(baseUrl: url));
   dio.interceptors.add(DioNetworkLogger());
   

3. 将网络日志覆盖按钮附加到UI：

   [@override](/user/override)
   void initState() {
     super.initState();
     NetworkLoggerOverlay.attachTo(context);
   }
   

示例代码

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late Dio dio;
  bool isLoading = false;
  final String url = 'https://jsonplaceholder.typicode.com';
  bool isProduction = false;

  void setupDio() {
    dio = Dio(BaseOptions(baseUrl: url));

    // 如果环境是生产环境，则不需要设置日志
    if (!isProduction) {
      dio.interceptors.add(DioNetworkLogger());
      NetworkLoggerOverlay.attachTo(context);
    }
  }

  Future<Response<T>> callDio<T>(Future<Response<T>> request) async {
    setState(() {
      isLoading = true;
    });
    try {
      return await request;
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    setupDio();
  }

  [@override](/user/override)
  void dispose() {
    dio.close();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Network Logger Sample'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                await callDio(
                  dio.post(
                    '/posts',
                    data: {
                      'title': 'foo',
                      'body': 'bar',
                      'userId': 1,
                    },
                  ),
                );
              },
              child: const Text('Post Data'),
            ),
            ElevatedButton(
              onPressed: () async {
                await callDio(dio.get('/todos/1'));
              },
              child: const Text('Fetch Data'),
            ),
            ElevatedButton(
              onPressed: () async {
                await callDio(
                  dio.put(
                    '/posts/1',
                    data: {
                      'id': 1,
                      'title': 'foo',
                      'body': 'bar',
                      'userId': 1,
                    },
                  ),
                );
              },
              child: const Text('Put Data'),
            ),
            ElevatedButton(
              onPressed: () async {
                await callDio(
                  dio.patch(
                    '/posts/1',
                    data: {
                      'title': 'foo',
                    },
                  ),
                );
              },
              child: const Text('Patch Data'),
            ),
            ElevatedButton(
              onPressed: () async {
                await callDio(dio.delete('/posts/1'));
              },
              child: const Text('Delete Data'),
            ),
            if (isLoading) const CircularProgressIndicator(),
          ],
        ),
      ),
    );
  }
}