Flutter报错：Object?类未定义运算符'[]'问题求助

问题原因 #

你使用的Dart版本开启了空安全和强类型校验，报错根因如下：

• 你定义的getProducts方法没有声明返回类型，默认返回Future<Object?>
• FutureBuilder未指定泛型，导致snapshot.data被推断为Object?类型，该类型本身没有定义[]下标操作符，直接用下标访问属性就会触发报错

解决方法 #

方案1：快速修复（适配教程写法，适合新手快速跑通） #

修改homepage.dart的两处代码即可：

1. 给getProducts方法补充返回类型：

Future<Map> getProducts() async {
  var response = await http.get(Uri.parse(url));
  print(json.decode(response.body));
  return json.decode(response.body) as Map;
}

2. 调整FutureBuilder的builder逻辑，提前强转数据类型：

builder: (context, snapshot) {
  if (snapshot.hasData) {
    final Map resData = snapshot.data as Map;
    return ListView.builder(
        itemCount: resData['data'].length,
        itemBuilder: (context, index) {
          return Text(resData['data'][index]['name']);
        });
  } else {
    return const Text('Data Error');
  }
}

方案2：规范写法（长期开发推荐） #

实际项目中建议定义数据模型类，避免硬编码下标访问，减少运行时错误：

1. 新增Product数据模型：

class Product {
  final int id;
  final String name;
  // 其他接口返回字段按需补充

  Product({required this.id, required this.name});

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'],
      name: json['name'],
    );
  }
}

2. 修改getProducts方法，直接返回解析后的模型列表：

Future<List<Product>> getProducts() async {
  var response = await http.get(Uri.parse(url));
  final Map resJson = json.decode(response.body) as Map;
  final List dataList = resJson['data'] as List;
  return dataList.map((item) => Product.fromJson(item)).toList();
}

3. 给FutureBuilder指定泛型，直接使用模型属性：

body: FutureBuilder<List<Product>>(
  future: getProducts(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final List<Product> products = snapshot.data!;
      return ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          return Text(products[index].name);
        }
      );
    } else if (snapshot.hasError) {
      return Text('加载失败：${snapshot.error}');
    } else {
      return const CircularProgressIndicator();
    }
  }
)

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