Flutter网络请求与日志检查插件fancy_dio_inspector的使用

Fancy Dio Inspector

Fancy Dio Inspector 是一个基于 Dio 的插件，它允许开发者记录、复制每一个网络请求、响应和错误。这在调试网络问题时非常有用。

开始使用

添加依赖

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

dependencies:
  fancy_dio_inspector: ^1.7.0

初始化

然后，在创建Dio实例时添加FancyDioInterceptor拦截器，以便捕获所有的请求、响应和错误信息：

final dio = Dio();

dio.interceptors.add(FancyDioInterceptor());

使用

为了能够在应用界面中查看这些日志，需要将FancyDioInspectorView加入到你的Widget树中。这里我们把它放在侧边栏中，只在Debug模式下显示：

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        endDrawer: kDebugMode ? FancyDioInspectorView() : null,
        body: Center(child: Text('Hello World')),
      ),
    );
  }
}

示例代码

下面是一个完整的示例代码，演示了如何结合fancy_dio_inspector进行网络请求并查看日志。

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

void main() {
  // 初始化Dio客户端
  DioClient.instance.init();
  
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? token;

  Future<void> login({bool success = true}) async {
    setState(() {
      token = null;
    });

    final response = await DioClient.instance.login(success: success);

    if (response != null) {
      setState(() {
        token = response.token;
      });
    }
  }

  void openDioInspector(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => FancyDioInspectorView(
          leading: CloseButton(onPressed: Navigator.of(context).pop),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Fancy Dio Inspector Example',
      home: Builder(
        builder: (context) => Scaffold(
          appBar: AppBar(title: const Text('Fancy Dio Inspector Example')),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text('Fancy Dio Inspector'),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => openDioInspector(context),
                  child: const Text('Open FancyDioInspectorView'),
                ),
                const SizedBox(height: 8),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: login,
                      child: const Text('Success Login'),
                    ),
                    const SizedBox(width: 8),
                    ElevatedButton(
                      onPressed: () => login(success: false),
                      child: const Text('Error Login'),
                    ),
                  ],
                ),
                const SizedBox(height: 4),
                Text('Token: $token'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class DioClient {
  DioClient._();
  static final DioClient instance = DioClient._();

  late final Dio _dio;

  void init() {
    _dio = Dio(BaseOptions(baseUrl: 'https://reqres.in/api'));

    // 添加FancyDioInterceptor拦截器，并设置选项
    _dio.interceptors.add(
      FancyDioInterceptor(
        options: const FancyDioInspectorOptions(
          consoleOptions: FancyDioInspectorConsoleOptions(verbose: true),
        ),
      ),
    );
  }

  Future<LoginResponse?> login({bool success = true}) async {
    final request = LoginRequest(
      email: 'eve.holt@reqres.${success ? 'in' : 'com'}',
      password: 'cityslicka',
    );

    try {
      final response = await _dio.post('/login', data: request.toJson());
      return LoginResponse.fromJson(response.data);
    } catch (e) {
      return null;
    }
  }
}

// 注意：这里缺少LoginRequest和LoginResponse类的定义，请根据实际情况补充。

注意：上面的代码中缺少LoginRequest和LoginResponse类的定义，你需要根据实际情况来定义这两个类。通常来说，它们应该包含API所需的字段以及从JSON解析的方法。