Flutter调用API获取数据正常但无法在Text组件展示问题求助

问题原因排查 #

1. 接口返回结构和解析类型不匹配：你调用的https://jsonplaceholder.typicode.com/todos/接口返回的是待办事项数组，不是单个待办对象，但你直接将返回的数组传入单个Welcome2对象的fromJson方法，解析直接报错，导致Future没有正常返回数据，触发hasData为false的分支。
2. 模型类fromJson逻辑错误：你定义的字段都是指定了类型的（int?、bool?等），但空适配时用了不同类型的返回值，比如userId: json["userId"] ?? json["userId"].toString()，如果json["userId"]为null，会返回String类型赋值给int?字段，触发类型异常。
3. 模型类中的列表解析方法是实例方法，无法直接调用，需要改成静态方法。
4. FutureBuilder缺少错误捕获逻辑，你没有判断snapshot.hasError，所以解析报错时你看不到具体错误信息。

修正后的代码 #

GET请求代码 #

// 返回类型改成列表
Future<List<Welcome2>> obtener2() async {
    var url = "https://jsonplaceholder.typicode.com/todos/";
    var response = await http.get(
      Uri.parse(url),
    );
    if (response.statusCode == 200) {
      print(response.body.toString());
      // 调用静态列表解析方法
      return Welcome2.welcome2FromJson(response.body);
    } else {
      throw Exception('Fallo al cargar la lista');
    }
}

模型类代码 #

import 'dart:convert';

class Welcome2 {
  final int? userId;
  final int? id;
  final String? title;
  final bool? completed;

  Welcome2({this.userId, this.id, this.title, this.completed});

  factory Welcome2.fromJson(Map<String, dynamic> json) => Welcome2(
        // 空适配时和字段类型保持一致，不要转成其他类型
        userId: json["userId"] ?? 0,
        id: json["id"] ?? 0,
        title: json["title"] ?? "",
        completed: json["completed"] ?? false,
      );

  Map<String, dynamic>? toJson() => {
        "userId": userId,
        "id": id,
        "title": title,
        "completed": completed,
      };

  // 改成静态方法，方便直接调用
  static List<Welcome2> welcome2FromJson(String str) =>
      List<Welcome2>.from(json.decode(str).map((x) => Welcome2.fromJson(x)));

  static String welcome2ToJson(List<Welcome2> data) =>
      json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
}

页面Widget代码 #

class _Vista2State extends State<Vista2> {
  MIsDatos mIsDatos = MIsDatos();
  // 泛型改成List<Welcome2>
  late Future<List<Welcome2>> listado;

  @override
  void initState() {
    super.initState();
    listado = listarP();
  }

  Future<List<Welcome2>> listarP() async {
    return mIsDatos.obtener2();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('LISTADO'),
          actions: [
            IconButton(onPressed: () {}, icon: const Icon(Icons.android)),
          ],
        ),
        body: FutureBuilder<List<Welcome2>>(
          future: listado,
          builder: (context, snapshot) {
            // 先判断是否有错误，方便排查问题
            if (snapshot.hasError) {
              return Center(child: Text('请求错误：${snapshot.error}'));
            }
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasData) {
                // 因为是列表，用ListView展示所有数据
                return ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    final item = snapshot.data![index];
                    return Column(
                      children: [
                        Text('id: ${item.id}'),
                        Text('用户id: ${item.userId}'),
                        Text('标题: ${item.title}'),
                        Text('是否完成: ${item.completed}'),
                        const Divider(),
                      ],
                    );
                  },
                );
              } else {
                return const Text('No ha datos');
              }
            } else {
              return const Center(
                child: CircularProgressIndicator(
                  backgroundColor: Colors.red,
                ),
              );
            }
          },
        ));
  }
}

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