Flutter调用JSONPlaceholder API获取名称时出现报错如何解决

核心报错原因 #

• 你没有给FutureBuilder指定泛型，snapshot.data默认是dynamic类型，Dart无法直接识别.length和.name属性
• getuser()方法没有完成JSON到实体类的解析，接口返回的原始JSON数据不能直接调用自定义属性
• 未处理Future的加载、异常状态，仅判断数据为空的逻辑不完备

修复步骤 #

1. 先创建User实体类用于JSON解析 #

class User {
  final int id;
  final String name;
  // 其他需要的字段可以自行补充

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

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

2. 修正getuser()方法的请求和解析逻辑 #

Future<List<User>> getuser() async {
  // 这里替换为你调用JSONPlaceholder用户接口的请求逻辑
  final response = await yourHttpGetMethod("JSONPlaceholder的用户接口地址");
  if (response.statusCode == 200) {
    List<dynamic> jsonList = response.data;
    return jsonList.map((json) => User.fromJson(json)).toList();
  } else {
    throw Exception("接口请求失败");
  }
}

注意把yourHttpGetMethod替换为你实际用的http请求方法，比如dio的get方法或者系统http库的get方法

3. 修正FutureBuilder代码 #

FutureBuilder<List<User>>(
  future: getuser(),
  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!.isEmpty) {
      return const Center(child: Text("nothing"));
    }
    // 正常渲染列表
    return ListView.builder(
      itemCount: snapshot.data!.length,
      itemBuilder: (context, i) {
        return ListTile(
          title: Text(snapshot.data![i].name),
        );
      },
    );
  },
)

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