Flutter网络通信插件netwolf的使用

概述

Netwolf 是一个用于调试 Flutter 应用程序网络请求的工具，灵感来源于 iOS 上的 Netfox。它通过拦截器来轻松调试网络请求（详见支持的客户端部分）。

安装

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

dependencies:
  netwolf: ^0.3.0

运行 flutter pub get 来安装依赖。

使用

要使用 Netwolf，需要将 NetwolfWidget 包裹到主页面中。

基本使用

void main() {
  runApp(
    const MaterialApp(
      home: NetwolfWidget(
        child: HomePage(),
      ),
    ),
  );
}

要显示 Netwolf 调试窗口，可以点击屏幕 5 次（点击区域不是 GestureDetector），或者调用 NetwolfController.instance.show()。

默认情况下，Netwolf 仅在调试模式下启用。如果 NetwolfWidget.enabled 设置为 false，则点击或调用 NetwolfController.instance.show() 不会生效。可以通过设置 NetwolfWidget 的构造函数参数来更改此行为：

void main() {
  runApp(
    const MaterialApp(
      home: NetwolfWidget(
        enabled: true,
        child: HomePage(),
      ),
    ),
  );
}

支持的客户端

支持的库

• Dio: 通过 NetwolfDioInterceptor。
• http: 使用 http_interceptor 通过 NetwolfHttpInterceptor（计划中）。

手动添加响应

对于不支持的客户端，可以手动记录响应。例如：

try {
  NetwolfController.instance.addRequest(
    someWayOfIdentifyingThisRequest, // 替换为唯一标识符
    method: HttpRequestMethod.get,   // 请求方法
    url: 'path/to/api',              // 请求路径
    requestHeaders: null,            // 请求头
    requestBody: null,               // 请求体
  );

  final response = await client.get('path/to/api');

  NetwolfController.instance.addResponse(
    someWayOfIdentifyingThisRequest, // 替换为唯一标识符
    responseCode: response.statusCode, // 响应状态码
    responseHeaders: response.headers, // 响应头
    responseBody: response.data,       // 响应体
    method: null,                      // 不需要重复提供
    url: null,                         // 不需要重复提供
    requestHeaders: null,              // 不需要重复提供
    requestBody: null,                 // 不需要重复提供
  );

  return response.data;
} on NetworkException catch (e) {
  NetwolfController.instance.addResponse(
    someWayOfIdentifyingThisRequest, // 替换为唯一标识符
    responseCode: e.statusCode,      // 异常状态码
    responseHeaders: e.headers,      // 异常头
    responseBody: e.data,            // 异常数据
    method: null,                    // 不需要重复提供
    url: null,                       // 不需要重复提供
    requestHeaders: null,            // 不需要重复提供
    requestBody: null,               // 不需要重复提供
  );

  return null;
}

使用 MaterialApp.router

如果使用 MaterialApp.router，需要创建一个空页面/壳路由，包含 NetwolfWidget 包裹的主页面。

使用 AutoRoute

class NetwolfAutoRouteEmptyPage extends EmptyRouterPage with AutoRouteWrapper {
  const NetwolfAutoRouteEmptyPage({super.key});

  [@override](/user/override)
  Widget wrappedRoute(BuildContext context) {
    return NetwolfWidget(child: this);
  }
}

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute<void>(
      page: NetwolfAutoRouteEmptyPage,
      initial: true,
      children: [
        AutoRoute<void>(page: HomePage, initial: true),
        // 其他页面...
      ],
    ),
  ],
)
class AppRouter extends _$AppRouter {}

使用 GoRouter

final router = GoRouter(
  routes: [
    ShellRoute(
      builder: (_, __, child) => NetwolfWidget(child: child),
      routes: [
        GoRoute(path: '/', builder: (_, __) => const HomePage()),
        // 其他页面...
      ],
    ),
  ],
);

完整示例代码

示例代码

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

void main() {
  runApp(
    const MaterialApp(
      home: NetwolfWidget(
        child: HomePage(),
      ),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Netwolf Demo')),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Wrap(
                spacing: 16,
                runSpacing: 16,
                children: [
                  ElevatedButton(
                    onPressed: NetwolfController.instance.show,
                    child: const Text('Show Netwolf'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Dio()
                        ..interceptors.add(NetwolfDioInterceptor())
                        ..get('https://pokeapi.co/api/v2/pokemon-form/132/');
                    },
                    child: const Text('Test API #1'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Dio()
                        ..interceptors.add(NetwolfDioInterceptor())
                        ..get('https://api.ipify.org?format=json');
                    },
                    child: const Text('Test API #2'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Dio()
                        ..interceptors.add(NetwolfDioInterceptor())
                        ..put('https://pokeapi.co/api/v2/pokemon-form/132/');
                    },
                    child: const Text('Test failed API #1'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Dio()
                        ..interceptors.add(NetwolfDioInterceptor())
                        ..post('https://api.ipify.org?format=json');
                    },
                    child: const Text('Test failed API #2'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}