Flutter新手求助：JSON解析类型不匹配错误的解决方法

你遇到的错误核心是JSON结构和代码解析逻辑不匹配，以下是具体分析和修复方案：

你的JSON数据 #

[
    {
      "id": "1",
      "name": "Deva",
      "age": "20",
      "address": {
        "streetname": "Park street",
        "area": "Jjnagar",
        "place": "Pollachi",
        "pincode": "642001"
    },
      "phonenumber": "8877665544"
    }
]

原代码问题 #

body: FutureBuilder(
            future:
                DefaultAssetBundle.of(context).loadString("assets/data.json"),
            builder: (context, snapshot) {
              var mydata = json.decode(snapshot.data.toString());
              return Center(
                child: Text(
                  mydata['name'],
                  style: const TextStyle(
                    color: Colors.deepPurple,
                    fontWeight: FontWeight.bold,
                    fontSize: 25,
                  ),
                ),
              );
            }));

• JSON最外层是数组（[]包裹），json.decode后得到的是List<dynamic>类型，直接用mydata['name']是把List当成Map来用，必然会报“字符串不能作为索引的int类型”错误。
• 未处理FutureBuilder的加载状态和错误状态，容易引发额外异常。

修复后的代码 #

body: FutureBuilder(
  future: DefaultAssetBundle.of(context).loadString("assets/data.json"),
  builder: (context, snapshot) {
    // 处理加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    // 处理错误状态
    if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }
    // 确保有数据再解析
    if (!snapshot.hasData || snapshot.data == null) {
      return const Center(child: Text('无数据'));
    }

    var mydata = json.decode(snapshot.data.toString());
    // 先取数组第一个元素，再获取name字段
    return Center(
      child: Text(
        mydata[0]['name'],
        style: const TextStyle(
          color: Colors.deepPurple,
          fontWeight: FontWeight.bold,
          fontSize: 25,
        ),
      ),
    );
  }
));

额外建议 #

• 如果JSON数组里有多个对象，可以用ListView.builder遍历展示：

  return ListView.builder(
    itemCount: mydata.length,
    itemBuilder: (context, index) {
      return ListTile(title: Text(mydata[index]['name']));
    },
  );
  

• 对于复杂JSON结构，推荐使用json_serializable包生成实体类，通过类型安全的方式解析数据，减少手动解析的错误。

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