Flutter http.get请求解析JSON数据返回null如何解决

问题现象 #

使用Dart编写Flutter网络请求逻辑时，需要在Widget中展示接口返回的用户邮箱，但打印解析后的数据时email字段始终为null，无法定位错误来源。

问题相关代码 #

Modelclass.dart #

int? page;
int? perPage;
int? total;
int? totalPages;
List<Data>? data;
Support? support;

Modelclass(
    {this.page,
    this.perPage,
    this.total,
    this.totalPages,
    this.data,
    this.support});

Modelclass.fromJson(Map<String, dynamic> json) {
  page = json['page'];
  perPage = json['per_page'];
  total = json['total'];
  totalPages = json['total_pages'];
  if (json['data'] != null) {
    data = <Data>[];
    json['data'].forEach((v) {
      data!.add(new Data.fromJson(v));
    });
  }
  support =
      json['support'] != null ? new Support.fromJson(json['support']) : null;
}

Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['page'] = this.page;
  data['per_page'] = this.perPage;
  data['total'] = this.total;
  data['total_pages'] = this.totalPages;
  if (this.data != null) {
    data['data'] = this.data!.map((v) => v.toJson()).toList();
  }
  if (this.support != null) {
    data['support'] = this.support!.toJson();
  }
  return data;
}
}

class Data {
int? id;
String? email;
String? firstName;
String? lastName;
String? avatar;

Data({this.id, this.email, this.firstName, this.lastName, this.avatar});

Data.fromJson(Map<String, dynamic> json) {
  id = json['id'];
  email = json['email'];
  firstName = json['first_name'];
  lastName = json['last_name'];
  avatar = json['avatar'];
}

Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['id'] = this.id;
  data['email'] = this.email;
  data['first_name'] = this.firstName;
  data['last_name'] = this.lastName;
  data['avatar'] = this.avatar;
  return data;
}
}

class Support {
String? url;
String? text;

Support({this.url, this.text});

Support.fromJson(Map<String, dynamic> json) {
  url = json['url'];
  text = json['text'];
}

Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['url'] = this.url;
  data['text'] = this.text;
  return data;
}
}

Repository.dart #

import 'package:http/http.dart' as http;
import 'package:neww/Model/Modelclass.dart';
import 'package:neww/Model/model2.dart';

const url = 'https://reqres.in/api/users/';

class Repository {
Future<Data?> getdata() async {
  final result = await http.get(Uri.parse(url));
  if (result.statusCode != 200) {
    return null;
  }
  final decodeddata = jsonDecode(result.body);

  final neww = Data.fromJson(decodeddata);
  print(neww.email);

  return neww;
}
}

问题根因 #

调用的reqres接口返回的最外层结构对应定义的Modelclass，email字段存储在最外层data字段对应的数组内，每个数组元素才是Data类型的用户对象。当前代码直接将最外层解码结果传入Data.fromJson()，最外层结构本身不存在email、first_name这类用户属性字段，解析时无法匹配到对应键值，因此打印email结果始终为null。
额外注意：当前代码使用jsonDecode但未导入dart:convert包，运行时也会触发报错，需要补充导入。

修复参考 #

调整Repository中的解析逻辑，先解析最外层结构为Modelclass对象，再从其data列表中取出用户对象，即可正常获取email字段值，修复后代码参考：

// 补充缺失的convert包导入
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:neww/Model/Modelclass.dart';

const url = 'https://reqres.in/api/users/';

class Repository {
  // 根据业务需求调整返回值类型，需要用户列表就返回List<Data>?
  Future<List<Data>?> getdata() async {
    final result = await http.get(Uri.parse(url));
    if (result.statusCode != 200) {
      return null;
    }
    final decodeddata = jsonDecode(result.body);
    // 先解析最外层响应结构
    final responseModel = Modelclass.fromJson(decodeddata);
    // 从data列表中取对应用户数据，例如取第一个用户邮箱可通过responseModel.data?.first.email获取
    print(responseModel.data?.first.email);

    return responseModel.data;
  }
}

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