Flutter中FutureBuilder展示JSON数据异常，寻求解决方法

核心问题拆解 #

你遇到的问题本质是三个逻辑错误叠加导致：

1. 误用全局变量绕开FutureBuilder的状态管理，导致UI与数据不同步
2. JSON解析时未完成类型转换，直接操作dynamic类型引发类型不匹配
3. 数据访问时的字段名错误、索引逻辑错误

分步修复方案 #

1. 废弃全局变量，直接依赖FutureBuilder的snapshot数据 #

全局变量无法触发Flutter的UI重建，即便在Future内更新值，页面也不会自动刷新。FutureBuilder的核心就是通过snapshot同步异步数据与UI状态，必须直接使用它提供的数据。

2. 正确实现JSON模型与解析函数 #

你的JSON是数组结构，必须先将其解码为List<dynamic>，再逐个转换为自定义模型类，避免直接操作_InternalLinkedHashMap。

首先定义Details模型类：

class Details {
  final String id;
  final String title;

  Details({required this.id, required this.title});

  // 从JSON Map转换为模型实例
  factory Details.fromJson(Map<String, dynamic> json) {
    return Details(
      id: json['id'] ?? '',
      title: json['title'] ?? '',
    );
  }
}

然后修正fetchData函数，确保返回List<Details>类型：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<Details>> fetchData(http.Client client) async {
  final response = await client.get(Uri.parse('你的API接口地址'));
  
  // 仅对API返回的字符串响应体做一次解码
  final List<dynamic> rawJsonList = json.decode(response.body);
  
  // 将数组中的每个Map转换为Details实例
  return rawJsonList.map((json) => Details.fromJson(json)).toList();
}

3. 修正FutureBuilder的状态判断逻辑 #

必须覆盖加载中、错误、空数据、成功所有状态，避免只判断connectionState.done（done状态可能伴随错误）：

FutureBuilder<List<Details>>(
  future: fetchData(http.Client()),
  builder: (BuildContext context, AsyncSnapshot<List<Details>> snapshot) {
    // 处理错误状态
    if (snapshot.hasError) {
      return const Center(child: Text('加载失败'));
    }

    // 处理加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }

    // 数据加载完成且非空
    if (snapshot.hasData && snapshot.data!.isNotEmpty) {
      final firstItem = snapshot.data![0];
      return AppBar(
        title: Text("Title: ${firstItem.title}"),
      );
    }

    // 空数据状态
    return const Center(child: Text('暂无数据'));
  },
);

4. 解决之前的类型错误 #

• type 'List' is not a subtype of type 'String'：因为你对已经解码的List再次调用了json.decode()，只需对API返回的字符串响应体解码一次。
• _InternalLinkedHashMap has no instance getter 'name'：一是你误访问了不存在的name字段（JSON里是title），二是没有将Map转换为Details模型。
• List? returnedJson无法访问值：可空类型需要先做非空判断，但更推荐直接用FutureBuilder的snapshot.data，无需全局变量。

关键注意事项 #

• 永远不要用全局变量存储异步数据，Flutter的状态管理组件（FutureBuilder、StatefulWidget等）会自动处理UI刷新。
• 必须为JSON数据创建对应的模型类，通过fromJson完成类型转换，避免直接操作dynamic类型引发的隐性错误。
• 覆盖FutureBuilder的所有状态分支，提升页面的健壮性和用户体验。

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