使用FutureBuilder获取JSON数据，解决Text Widget渲染类型错误

错误根源 #

你碰到的type 'String' is not a subtype of type 'int' of 'index'错误，核心问题有两个：

1. snapshot.data是未解析的JSON字符串：你拿到的snapshot.data是原始的JSON格式字符串，不是Dart能直接操作的Map对象，直接用字符串索引必然报错。
2. 数据结构与索引方式不匹配：就算解析了JSON，原数据是键为字符串（"0"/"1"）的Map，而你在列表中用的是int类型的index，直接用index.toString()访问Map的前提是数据已经被解析成Map，但你第一步就没做解析，才触发了类型错误。

解决步骤 #

1. 解析JSON字符串为Dart Map

先导入dart:convert包，用jsonDecode()把原始JSON字符串转换成Map<String, dynamic>对象，让数据变成可操作的结构。

2. 将Map的values转为List

把Map里的所有 Breed 对象提取出来转成List，这样就能用int类型的index直接访问列表元素，完美适配ListView这类组件的索引逻辑。

3. 修正Text组件的渲染代码

基于转换后的List，直接通过index获取对应元素，再提取Breed字段即可。

完整可运行代码示例 #

import 'dart:convert';
import 'package:flutter/material.dart';

class BreedDisplay extends StatelessWidget {
  // 模拟接口返回的JSON字符串
  Future<String> getBreedData() async {
    return "{\"0\":{\"Breed\":\"American Hairless Terrier\",\"count\":1},\"1\":{\"Breed\":\"Bolognese\",\"count\":2},\"2\":{\"Breed\":\"Cavalier King Charles Spaniel\",\"count\":12},\"3\":{\"Breed\":\"Central Asian Shepherd Dog\",\"count\":1},\"4\":{\"Breed\":\"Papillon\",\"count\":1}}";
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: getBreedData(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          // 解析JSON字符串为Map
          final breedMap = jsonDecode(snapshot.data!);
          // 把Map的values转成List，方便用索引访问
          final breedList = breedMap.values.toList();

          return ListView.builder(
            itemCount: breedList.length,
            itemBuilder: (context, index) {
              // 正确渲染Breed字段
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(breedList[index]['Breed']),
              );
            },
          );
        } else if (snapshot.hasError) {
          return Text('加载失败: ${snapshot.error}');
        }
        // 加载中状态
        return const Center(child: CircularProgressIndicator());
      },
    );
  }
}

额外优化建议 #

如果需要同时展示count字段，直接在Text里拼接即可：

Text("${breedList[index]['Breed']} - 数量: ${breedList[index]['count']}")

另外建议给Breed数据创建实体类，用json_serializable做序列化，避免动态类型的潜在问题，让代码更健壮。

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