为何我在FutureBuilder中遇到此错误？

常见错误点及排查步骤： #

• 禁止在build方法内直接创建Future
  Widget每次重建时build方法都会重新执行，若把future: fetchData()这类代码直接写在FutureBuilder参数里，会导致Future反复触发，引发异常。正确做法是在initState中初始化Future并存储到State变量：

  late Future<YourDataType> _futureData;
  
  @override
  void initState() {
    super.initState();
    _futureData = fetchData();
  }
  
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _futureData,
      builder: (context, snapshot) {
        // 构建UI逻辑
      },
    );
  }
  

• 必须处理所有ConnectionState状态
  需覆盖ConnectionState.none、ConnectionState.waiting、ConnectionState.active、ConnectionState.done全部状态，尤其要做好加载中（waiting）和请求失败（error）的UI处理，避免出现空白或崩溃：

  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('请求失败: ${snapshot.error}');
    } else if (snapshot.hasData) {
      return Text('数据内容: ${snapshot.data}');
    } else {
      return Text('无可用数据');
    }
  }
  

• 保证Future返回类型与FutureBuilder泛型匹配
  比如声明FutureBuilder<List<Item>>时，对应的Future必须返回List<Item>类型，若返回null或其他不匹配类型，会触发类型错误。检查你的Future函数返回值是否和泛型一致。

• 可选：检查Future是否已正确取消
  若Widget被dispose后Future仍在执行，可能引发内存泄漏或异常。可使用CancelableOperation实现可取消的异步请求，并在dispose方法中取消未完成的请求。

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