Flutter网络模拟插件slow_net_simulator的使用

SlowNetSimulator 是一个强大的Flutter包，旨在帮助开发者直接在Flutter应用中模拟不同的网络速度和条件。这对于测试应用程序在各种网络条件下（如2G、3G、4G或网络故障）的行为特别有用。

特性

• 模拟不同的网络速度：GPRS (2G)、EDGE (2G)、HSPA (3G) 和 LTE (4G)。
• 引入人为延迟以模仿真实世界条件。
• 配置网络失败概率以测试错误处理。
• 可轻松集成任何异步请求。
• 通过覆盖按钮实时调整网络设置。
• 对于调试和测试应用程序弹性非常有用。

入门指南

要使用此包，请在 pubspec.yaml 文件中添加 slow_net_simulator 作为依赖项：

dependencies:
  slow_net_simulator: ^1.0.0

然后运行：

flutter pub get

使用方法

1. 在 main.dart 中配置

在您的 main 函数中，使用预定义的网络速度和失败概率来配置模拟器：

void main() {
  SlowNetSimulator.configure(
    speed: NetworkSpeed.EDGE_2G, // 选择预定义的速度或自定义速度
    failureProbability: 0.2,    // 20% 的失败概率
  );

  runApp(MyApp());
}

2. 使用 simulate 包装请求

为了模拟任何异步请求的网络行为，将您的请求包装在 SlowNetSimulator.simulate 中。这不仅适用于 Dio，也适用于任何异步操作：

final response = await SlowNetSimulator.simulate(() async {
  return await dio.get('https://jsonplaceholder.typicode.com/posts/1');
});

您可以替换 dio.get 调用为任何其他请求或异步操作：

final result = await SlowNetSimulator.simulate(() async {
  // 执行任何异步任务
  return await someAsyncFunction();
});

3. 调整失败概率

失败概率参数允许您定义请求失败的可能性。这对于测试应用程序如何处理突然的请求失败非常有用。例如：

SlowNetSimulator.configure(
  speed: NetworkSpeed.HSPA_3G, // 模拟3G速度
  failureProbability: 0.5,    // 50% 的失败概率
);

通过这种设置，您可以测试应用程序的错误处理能力，并确保其在不利条件下表现良好。

4. 显示覆盖按钮

为了启用对网络条件的实时调整，必须确保显示覆盖按钮。将以下代码放在主小部件或您希望覆盖出现的任何小部件的 build 方法顶部：

[@override](/user/override)
Widget build(BuildContext context) {

  //-----to show overlay button---------------------
  WidgetsBinding.instance.addPostFrameCallback((_) {
    SlowNetOverlay.showOverlay(context);
  });

  return MaterialApp(
    home: ExamplePage(),
  );
}

5. 示例UI集成

下面是一个如何将 SlowNetSimulator 与 Flutter 应用程序集成的示例：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const ExamplePage(),
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
    );
  }
}

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

  [@override](/user/override)
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  double failureProbability = 0.0;
  NetworkSpeed speed = NetworkSpeed.HSPA_3G;
  Post? _data;
  String? errorResponse;
  bool _isLoading = false;
  bool _isSuccess = false;
  final Dio dio = Dio();

  [@override](/user/override)
  void initState() {
    super.initState();
    _configureSimulator(NetworkSpeed.HSPA_3G, 0.0);
  }

  void _configureSimulator(NetworkSpeed speed, double failureProbability) {
    SlowNetSimulator.configure(
        speed: speed, failureProbability: failureProbability);
    setState(() {});
  }

  Future<void> _fetchData() async {
    setState(() => _isLoading = true);

    try {
      final response = await SlowNetSimulator.simulate(() async {
        return await dio.get('https://jsonplaceholder.typicode.com/posts/1');
      });

      setState(() {
        _data = Post.fromJson(response.data);
        _isSuccess = true;
        errorResponse = null;
      });
    } catch (e) {
      setState(() {
        errorResponse = e.toString();
        _isSuccess = false;
      });
    } finally {
      setState(() => _isLoading = false);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      SlowNetOverlay.showOverlay(context);
    });

    return Scaffold(
      appBar: AppBar(
        title: const Text('SlowNetSimulator Example'),
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
      ),
      body: SafeArea(
        child: Container(
          width: double.infinity,
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(child: _buildResponseDisplay()),
              _buildFetchButton(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildResponseDisplay() {
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    } else if (!_isSuccess && errorResponse != null) {
      return Center(
        child: Container(
          height: 100,
          width: 300,
          padding: EdgeInsets.all(10),
          color: Colors.red[100],
          child: Column(
            children: [
              Icon(
                Icons.error_rounded,
                color: Colors.red[500],
                size: 45,
              ),
              Text(
                errorResponse!,
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16, color: Colors.red[500]),
              ),
            ],
          ),
        ),
      );
    } else if (_data != null) {
      return SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Post Detail",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            Text(
              _data!.title,
              style: const TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
            ),
            Text(
              _data!.body,
              style: const TextStyle(fontSize: 16),
            ),
          ],
        ),
      );
    } else {
      return const SizedBox.shrink();
    }
  }

  Widget _buildFetchButton() {
    return ElevatedButton(
      autofocus: false,
      style: ButtonStyle(
          backgroundColor: WidgetStatePropertyAll(Colors.red),
          foregroundColor: WidgetStatePropertyAll(Colors.white)),
      onPressed: _isLoading ? null : _fetchData,
      child: const Text('Fetch Data'),
    );
  }
}

class Post {
  final int id;
  final String title;
  final String body;

  Post({required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json["id"],
      title: json["title"],
      body: json["body"],
    );
  }
}