Flutter使用FutureBuilder时报错返回类型Object?不是Widget如何解决

报错根本原因 #

• 异步方法loadList的返回类型声明错误：你定义的返回类型为Future<void>，但方法实际返回的是ListView类型的Widget，类型不匹配。
• FutureBuilder未指定泛型约束：编译器无法推断snapshot.data的具体类型，默认识别为Object?，不符合闭包要求返回Widget的规则。

你之前将代码改为return Text(snapshot.data.toString());时渲染出组件结构文本，是因为该操作仅将ListView对象转为字符串输出，并未真正渲染ListView组件。

具体修复步骤 #

1. 修改loadList的返回类型，将Future<void>调整为Future<Widget>

// 修改前
Future<void> loadList(BuildContext context) async {
// 修改后
Future<Widget> loadList(BuildContext context) async {

2. 给FutureBuilder添加泛型约束，明确异步返回值为Widget类型

// 修改前
body: FutureBuilder(
// 修改后
body: FutureBuilder<Widget>(

3. （可选优化）错误分支的错误信息应从snapshot.error取值，原代码取snapshot.data展示错误信息的逻辑错误：

if (snapshot.connectionState == ConnectionState.done) {
  if (snapshot.hasError) {
    return Center(
      child: Text(snapshot.error.toString()),
    );
  }
}

完整可运行代码 #

import 'package:flutter/material.dart';

class FutureBuilderTest extends StatefulWidget {
  @override
  _FutureBuilderTestState createState() => _FutureBuilderTestState();
}

class _FutureBuilderTestState extends State<FutureBuilderTest> {
  // 修正返回类型
  Future<Widget> loadList(BuildContext context) async {
    return Future.delayed(
      const Duration(seconds: 1),
      () {
        return ListView.builder(
          itemCount: 40,
          itemBuilder: (context, index) {
            return Card(
              elevation: 8,
              child: Text(
                "Dummy Text $index",
                style: const TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
              ),
            );
          },
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Future Builder Test"),
      ),
      // 添加泛型约束
      body: FutureBuilder<Widget>(
        future: loadList(context),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return Center(
                child: Text(snapshot.error.toString()),
              );
            }
          }
          if (snapshot.data != null) {
            // 已提前判空，添加!断言即可通过类型校验
            return snapshot.data!;
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

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