Flutter：API请求耗时超4秒时触发Snackbar提示的实现方法

核心思路是在发起API请求的同时启动一个4秒延迟定时器，如果请求在4秒内完成则取消定时器，否则触发Snackbar提示网络过慢，无需实时轮询耗时，逻辑简洁高效。

实现步骤与代码示例 #

1. 在页面的State类中定义定时器变量，用于后续管理：

Timer? _slowConnectionTimer;

2. 编写API请求方法，整合定时器逻辑：

void _startApiRequest() async {
  // 启动4秒延迟任务，到点触发Snackbar
  _slowConnectionTimer = Timer(const Duration(seconds: 4), () {
    if (mounted) { // 确保页面未销毁再显示弹窗
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("your internet connection is slow")),
      );
    }
  });

  try {
    // 执行你的API请求
    final response = await http.get(Uri.parse("https://your-api-endpoint.com/data"));
    
    // 处理请求成功的逻辑
    if (response.statusCode == 200) {
      // 解析响应数据等操作
    }
  } catch (error) {
    // 处理请求失败的逻辑（比如网络错误、服务器异常）
    print("API请求失败: $error");
  } finally {
    // 无论请求成功/失败，都取消定时器，避免后续误触发
    _slowConnectionTimer?.cancel();
    _slowConnectionTimer = null;
  }
}

3. 页面销毁时清理定时器，防止内存泄漏：

@override
void dispose() {
  _slowConnectionTimer?.cancel();
  super.dispose();
}

关键逻辑说明 #

• 定时器会在请求发起后4秒执行Snackbar显示操作，此时如果请求仍在运行，说明耗时已超过4秒，正好符合你的需求。
• finally块确保请求完成（无论成功或失败）后立即取消定时器，避免请求完成后还弹出不必要的提示。
• 加入mounted判断是为了防止页面已销毁时调用context引发异常。

内容的提问来源于stack exchange，提问作者Moyosola