Flutter中如何处理‘List<dynamic>不是Map<String,dynamic>子类型’异常

问题场景 #

调用API展示信息列表时抛出异常：

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: type 'List' is not a subtype of type 'Map<String, dynamic>'

API响应格式 #

API返回的是包含多个对象的数组：

[
    {
        "id": 1,
        "username": "naveen",
        "email": "demo@email.com",
        "scheduledDate": "15-09-2022",
        "remarks": "demo",
        "createdAt": "2022-09-14T23:57:09.344Z",
        "updatedAt": "2022-09-14T23:57:09.344Z"
    },
    {
        "id": 2,
        "username": "naveen",
        "email": "demo@email.com",
        "scheduledDate": "16-09-2022",
        "remarks": "demo",
        "createdAt": "2022-09-14T23:57:17.756Z",
        "updatedAt": "2022-09-14T23:57:17.756Z"
    }
]

现有代码 #

模型类 #

class ScheduleListModel {
  int? id;
  String? username;
  String? email;
  String? scheduledDate;
  String? remarks;
  String? createdAt;
  String? updatedAt;

  ScheduleListModel(
      {this.id,
      this.username,
      this.email,
      this.scheduledDate,
      this.remarks,
      this.createdAt,
      this.updatedAt});

  ScheduleListModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    username = json['username'];
    email = json['email'];
    scheduledDate = json['scheduledDate'];
    remarks = json['remarks'];
    createdAt = json['createdAt'];
    updatedAt = json['updatedAt'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['id'] = id;
    data['username'] = username;
    data['email'] = email;
    data['scheduledDate'] = scheduledDate;
    data['remarks'] = remarks;
    data['createdAt'] = createdAt;
    data['updatedAt'] = updatedAt;
    return data;
  }
}

Provider类 #

class ScheduleListProvider extends ChangeNotifier {
  bool isBack = false;
  late ScheduleListModel scheduleListModel;
  ScheduleListModel get getScheduleListModel => scheduleListModel;

  Future<void> getAllScheduleListData() async {
    getAllSchedule().then((response) => {
          if (response!.statusCode == 200)
            {
              scheduleListModel =
                  ScheduleListModel.fromJson(json.decode(response.body)),
              notifyListeners(),
            }
        });
  }
}

API调用代码 #

Future<http.Response?> getAllSchedule() async {
  late SharedPreferences logindata;
  logindata = await SharedPreferences.getInstance();
  late String? token = logindata.getString('token');
  http.Response? response;
  try {
    response = await http.get(Uri.parse(Config.getAllScheduleAPI), headers: {
      HttpHeaders.contentTypeHeader: "application/json",
      'x-access-token': '$token',
    });
  } catch (e) {
    log(e.toString());
  }
  return response;
}

错误原因 #

API返回的是数组（List），但Provider中直接用ScheduleListModel.fromJson()解析整个响应体——这个方法只接受单个对象的Map<String, dynamic>，类型不匹配导致异常。

解决方案 #

步骤1：修改Provider的变量类型与解析逻辑 #

将单个模型对象改为模型列表，改用async/await简化代码并正确解析数组：

class ScheduleListProvider extends ChangeNotifier {
  bool isBack = false;
  List<ScheduleListModel> scheduleList = []; // 改为列表类型
  List<ScheduleListModel> get getScheduleList => scheduleList; // 更新getter

  Future<void> getAllScheduleListData() async {
    final response = await getAllSchedule();
    if (response?.statusCode == 200) {
      final List<dynamic> jsonList = json.decode(response!.body);
      // 遍历数组，将每个JSON对象转为ScheduleListModel实例
      scheduleList = jsonList.map((json) => ScheduleListModel.fromJson(json)).toList();
      notifyListeners();
    }
  }
}

可选优化：在模型类中添加列表解析方法 #

在ScheduleListModel中新增静态方法专门处理列表解析，让代码更模块化：

class ScheduleListModel {
  // ... 原有代码不变 ...

  static List<ScheduleListModel> fromJsonList(List<dynamic> jsonList) {
    return jsonList.map((json) => ScheduleListModel.fromJson(json)).toList();
  }
}

此时Provider中的解析代码可简化为：

scheduleList = ScheduleListModel.fromJsonList(json.decode(response!.body));

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