Flutter报错：类'Object?'未定义运算符'[]'的原因与解决方法

报错场景 #

使用FutureBuilder组件编写异步拉取数据渲染列表逻辑时，触发编译报错：
Error: The operator '[]' isn't defined for the class 'Object?'
该报错含义：Object?类型的对象未定义下标访问运算符[]，无法通过[]下标方式取值。

问题代码如下：

return Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: Center(
child: FutureBuilder(
future: fetchphoto() ,
builder: (ctx, snapshot){

        if(snapshot.connectionState == ConnectionState.waiting){
          return CircularProgressIndicator();
        }else{
          return ListView.builder(
            itemBuilder:(_, index){
              return ListTile(
                leading: CircleAvatar(backgroundImage: NetworkImage(snapshot.data[index]['thumbnailUrl'])),
                title: Text(snapshot.data[index]['title']),
                subtitle:Text("${snapshot.data[index]??['id']}"),
              );
            },
            itemCount: 12,
          );
        }
      },
    )
  ),
   // This trailing comma makes auto-formatting nicer for build methods.
);

}
}

报错根因 #

• 未给FutureBuilder指定明确的泛型类型，默认情况下snapshot.data的推导类型为Object?，编译器无法识别其为可下标访问的列表/Map类型，因此禁止[]操作
• 代码存在笔误：snapshot.data[index]??['id']将空判断符写在索引与key之间，语法逻辑错误
• 未做异常、空数据场景的分支判断，存在运行时崩溃风险
• itemCount硬编码为12，和实际返回数据长度不匹配时会触发数组越界

修复步骤 #

1. 为FutureBuilder绑定和fetchphoto()返回值一致的泛型，假设接口返回结构为Future<List<Map<String, dynamic>>>，则声明为FutureBuilder<List<Map<String, dynamic>>>
2. 补充错误状态、空数据状态的分支判断，覆盖所有异步加载场景
3. 提前将snapshot.data赋值给明确类型的列表变量，避免反复书写强制类型转换
4. 修正空判断的书写位置，对字段取值做空值兼容
5. itemCount使用实际返回的列表长度，禁止硬编码固定值

修复后完整代码 #

return Scaffold(
  appBar: AppBar(
    title: const Text("Demo"),
  ),
  body: Center(
    child: FutureBuilder<List<Map<String, dynamic>>>(
      future: fetchphoto(),
      builder: (ctx, snapshot) {
        // 加载中状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }
        // 加载失败状态
        if (snapshot.hasError) {
          return Text("加载出错：${snapshot.error}");
        }
        // 空数据状态
        if (!snapshot.hasData || snapshot.data!.isEmpty) {
          return const Text("暂无对应数据");
        }
        // 拿到明确类型的列表数据
        final photoList = snapshot.data!;
        return ListView.builder(
          itemBuilder: (_, index) {
            final currentItem = photoList[index];
            return ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage(currentItem['thumbnailUrl']),
              ),
              title: Text(currentItem['title'] ?? ''),
              subtitle: Text("${currentItem['id'] ?? ''}"),
            );
          },
          itemCount: photoList.length,
        );
      },
    ),
  ),
);

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