yx_net_inspector_flutter/example

YX 网络检查器示例应用

这是一个完整的示例应用，展示了 YX Net Inspector 的所有功能和使用方法。

🚀 功能展示

📱 应用结构

示例应用包含三个主要页面：

1. 功能演示页面 - 展示各种网络请求模拟
2. Dio 集成页面 - 演示 Dio 拦截器的使用
3. 设置页面 - 配置检查器的各种选项

✨ 主要功能

🎯 功能演示页面

• 网络请求统计 - 实时显示发送的请求数量
• 真实API端点测试 - 使用真实的开放API进行测试
  • JSONPlaceholder API - 用户列表、文章列表、创建文章、更新用户、删除用户
  • Cat Facts API - 获取随机猫咪事实
  • HTTPBin API - HTTP测试、IP地址、用户代理、错误状态码
  • ReqRes API - 用户信息获取
• 快速操作
  • 随机请求 - 发送随机类型的真实网络请求
  • 批量请求 - 同时发送多个真实请求
  • 错误请求 - 使用HTTPBin测试各种错误状态码
• 批量测试 - 测试大量真实请求的性能和内存管理
• 使用提示 - 详细的操作指导

🔌 Dio 集成页面

• 安装指南 - 详细的 Dio 安装和配置步骤
• 代码示例 - 完整的集成代码示例
• 功能特性 - Dio 拦截器的所有功能说明
• 模拟演示 - 在没有 Dio 的情况下模拟拦截器行为

⚙️ 设置页面

• 检查器状态 - 显示当前的网络请求统计
• 悬浮球设置
  • 显示/隐藏悬浮球
  • 调整悬浮球大小 (40-100px)
  • 选择悬浮球颜色
  • 启用/禁用拖拽功能
  • 显示/隐藏数量徽章
  • 自动隐藏选项
• 日志设置
  • 配置最大日志数量 (100-5000)
  • 查看当前日志数量
• 主题设置
  • 自定义主色调
  • 配置成功/错误/警告颜色
• 操作功能
  • 应用设置
  • 重置为默认设置
  • 导出日志
  • 清空所有日志
• 详细统计
  • 各种HTTP方法的请求数量
  • 平均响应时间
  • 最近请求时间

🎨 界面特色

现代化设计

• Material Design 3 - 遵循最新的Material设计规范
• 卡片布局 - 清晰的信息分组和层次
• 响应式设计 - 适配不同屏幕尺寸
• 动画效果 - 流畅的交互动画

用户体验

• 直观导航 - 底部导航栏快速切换页面
• 实时反馈 - SnackBar 消息提示
• 状态指示 - 加载状态和进度显示
• 帮助提示 - 详细的使用说明和提示

颜色系统

• 蓝色主题 - 专业的蓝色配色方案
• 语义化颜色 - 成功(绿色)、警告(橙色)、错误(红色)
• 自定义主题 - 支持主题色彩自定义

🌐 使用的真实API

示例应用集成了多个优质的免费开放API，提供真实的网络请求体验：

🔗 API 服务商

JSONPlaceholder (jsonplaceholder.typicode.com)

• 用途: REST API 测试
• 端点:
  • GET /users - 获取用户列表
  • GET /posts - 获取文章列表
  • POST /posts - 创建新文章
  • PUT /users/2 - 更新用户信息
  • DELETE /users/2 - 删除用户
• 特点: 返回真实的JSON数据结构，支持所有HTTP方法

HTTPBin (httpbin.org)

• 用途: HTTP 请求测试工具
• 端点:
  • GET /json - 返回JSON测试数据
  • GET /ip - 获取客户端IP地址
  • GET /user-agent - 获取用户代理信息
  • GET /status/{code} - 返回指定的HTTP状态码
• 特点: 专门用于测试HTTP请求的各种场景

ReqRes (reqres.in)

• 用途: REST API 模拟服务
• 端点:
  • GET /api/users/2 - 获取单个用户信息
  • PUT /api/users/2 - 更新用户信息
  • DELETE /api/users/2 - 删除用户
• 特点: 提供真实的API响应格式，支持分页

Cat Facts API (catfact.ninja)

• 用途: 有趣的猫咪事实
• 端点:
  • GET /fact - 获取随机猫咪事实
• 特点: 轻量级API，返回有趣的内容

🎯 真实API的优势

1. 真实网络延迟 - 体验真实的网络请求时间
2. 真实响应数据 - 查看实际的API响应格式
3. 网络错误处理 - 体验真实的网络异常情况
4. HTTP状态码 - 测试各种HTTP状态码的处理
5. 请求头信息 - 查看完整的HTTP请求头
6. 响应头信息 - 分析真实的HTTP响应头

🚀 网络测试场景

• 成功请求 - 体验200, 201等成功状态码
• 客户端错误 - 测试400, 401, 403, 404等错误
• 服务器错误 - 模拟500, 502, 503等服务器问题
• 网络超时 - 在网络不稳定时观察超时处理
• 大数据量 - 通过批量请求测试性能

🛠 技术实现

代码结构

example/
├── lib/
│   ├── main.dart              # 应用入口和主页面
│   └── pages/
│       ├── demo_page.dart     # 功能演示页面
│       ├── dio_demo_page.dart # Dio 集成演示
│       └── settings_page.dart # 设置页面
└── README.md                  # 本文档

核心功能

• 网络请求模拟 - 使用 YxNetInspectorController 手动记录日志
• 状态管理 - 使用 StatefulWidget 管理页面状态
• 数据持久化 - 演示配置的保存和加载
• 错误处理 - 完善的异常处理机制

📖 使用指南

快速开始

1. 运行示例应用

   cd example
   flutter run
   

2. 查看悬浮球

   • 应用启动后会看到蓝色的悬浮球
   • 点击悬浮球打开网络检查器

3. 测试功能

   • 在"功能演示"页面发送各种网络请求
   • 观察悬浮球上的数字变化
   • 在检查器中查看详细的请求信息

高级功能

批量测试

• 使用"批量测试"功能发送大量请求
• 观察内存管理和性能表现
• 验证日志数量限制功能

Dio 集成

• 查看"Dio 集成"页面的详细说明
• 按照指南在实际项目中集成 Dio 拦截器
• 使用模拟功能了解拦截器行为

个性化设置

• 在"设置"页面自定义检查器配置
• 调整悬浮球外观和行为
• 配置日志管理选项

🎯 最佳实践

开发建议

1. 合理配置日志数量 - 根据应用需求设置合适的最大日志数
2. 选择合适的悬浮球大小 - 平衡可见性和界面美观
3. 使用搜索功能 - 在大量日志中快速定位问题
4. 定期清理日志 - 避免内存占用过多

调试技巧

1. 错误请求测试 - 使用错误请求功能测试异常处理
2. 性能测试 - 使用批量请求测试应用性能
3. 网络状态监控 - 通过统计信息了解网络状况

🔧 自定义扩展

添加新的请求类型

可以在 demo_page.dart 中的 _endpoints 列表中添加新的API端点：

{
  'name': '自定义API',
  'method': 'PATCH',
  'url': 'https://api.example.com/custom',
  'description': '自定义API描述',
  'icon': Icons.custom_icon,
}

扩展设置选项

在 settings_page.dart 中可以添加更多配置选项：

// 添加新的设置项
SwitchListTile(
  title: const Text('新功能开关'),
  subtitle: const Text('启用新功能'),
  value: _newFeatureEnabled,
  onChanged: (value) {
    setState(() {
      _newFeatureEnabled = value;
    });
  },
),

📚 相关资源

• YX Net Inspector 主文档
• API 参考文档
• Dio 集成指南
• Flutter 官方文档

🤝 贡献

欢迎提交 Issues 和 Pull Requests 来改进示例应用：

1. Fork 本仓库
2. 创建功能分支
3. 提交更改
4. 发起 Pull Request

📄 许可证

本示例应用遵循与 YX Net Inspector 相同的 MIT 许可证。