Flutter网络请求检查插件stetho_network_inspector的使用

Flutter网络请求检查插件stetho_network_inspector的使用

stetho_network_inspector

注意：这是flutter_stetho的一个克隆版本，并已修改以支持Flutter 3.0。

这是一个将Flutter连接到Android设备上Chrome开发者工具的插件，通过Stetho Android Library实现。

网络检查器 (Network Inspector)

我主要想实现的功能是网络检查器。

开始使用 (Getting Started)

如何在自己的应用程序中启动并运行这个插件？请遵循以下步骤。

安装插件 (Install the plugin)

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

dependencies:
  flutter:
    sdk: flutter
  stetho_network_inspector: ^x.x.x # 替换为最新版本号

安装StethoHttpOverrides (Install StethoHttpOverrides)

接下来，你需要在应用程序的main()函数中初始化Stetho.initialize()。这将启用Stetho，并允许stetho_network_inspector包裹所有的HTTP调用，并通过Facebook的Stetho包向Chrome开发者工具报告信息。

注意：最好只在一个main_dev.dart文件中放置这个覆盖。

void main() {
  // 初始化Stetho
  Stetho.initialize();

  runApp(new MyApp());
}

在安卓设备上运行你的应用 (Run your app on an Android Device)

执行以下命令运行应用：

flutter run

打开Chrome浏览器 (Open Chrome)

打开Chrome或Chromium浏览器，导航到chrome://inspect。

你应该会在窗口中看到你的应用程序出现。

已知问题 (Known Issues)

• 某些请求的时间可能稍微有点不对。这是因为：
• 代码是一个粗糙的MVP/原型代码，需要改进。
• 动画GIF不工作。
• 某些错误情况可能没有正确处理。需要更多的测试/反馈来发现问题。
• 没有测试。
• 如果应用程序在启动时关闭，请运行flutter clean以删除旧的构建。

完整示例Demo

以下是完整的示例代码，演示了如何使用stetho_network_inspector插件：

import 'package:flutter/material.dart';
import 'package:stetho_network_inspector/stetho_network_inspector.dart';
import 'package:http/http.dart' as http;

// 主函数，初始化Stetho并运行应用
void main() {
  Stetho.initialize(); // 初始化Stetho

  runApp(new StethoNetworkInspectorExample(
    client: new http.Client(), // 创建HTTP客户端
  ));
}

// 示例应用类
class StethoNetworkInspectorExample extends StatelessWidget {
  late final http.Client client;

  StethoNetworkInspectorExample({Key? key, required this.client})
      : super(key: key);

  // 获取图片数据
  fetchImage() {
    client.get(
      Uri.parse('https://flutter.dev/assets/404/dash_nest-c64796b59b65042a2b40fae5764c13b7477a592db79eaf04c86298dcb75b78ea.png'),
      headers: {'Authorization': 'token'}, // 添加授权头
    );
  }

  // 获取JSON数据
  fetchJson() {
    client.get(
      Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
      headers: {'Authorization': 'token'}, // 添加授权头
    );
  }

  // 获取错误数据
  fetchError() {
    client.get(Uri.parse('https://jsonplaceholder.typicode.com/postadsass/1'));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('插件示例应用'), // 应用标题
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Padding(
                padding: new EdgeInsets.all(16.0),
                child: new ElevatedButton(
                  onPressed: fetchJson, // 按钮点击事件，获取JSON数据
                  child: new Text("获取JSON"),
                ),
              ),
              new Padding(
                padding: new EdgeInsets.all(16.0),
                child: new ElevatedButton(
                  onPressed: fetchImage, // 按钮点击事件，获取图片
                  child: new Text("获取图片"),
                ),
              ),
              new Padding(
                padding: new EdgeInsets.all(16.0),
                child: new ElevatedButton(
                  onPressed: fetchError, // 按钮点击事件，触发错误
                  child: new Text("触发错误"),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}