如何解决Flutter中“List<dynamic>不是Map<String,dynamic>子类型”异常

在Flutter中通过HTTP请求从PHP接口获取数组结构的JSON数据，编写了ProductController的fetchProduct()方法和ProductModel模型类，运行时出现类型不匹配错误：Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic>'。

错误原因 #

• 接口返回的JSON是数组结构（由[]包裹），但当前代码直接将整个响应体传入ProductModel.fromJson()，而该方法接收的是单个Map<String, dynamic>类型的对象，导致类型不匹配。
• 额外问题：ProductModel的部分字段与JSON返回的键名不对应（比如JSON中的price对应Model的product_price，discription对应product_description，categoryId对应product_category），即使解析成功也会出现字段为空的情况。

修正步骤及代码 #

1. 修改fetchProduct()方法，正确解析数组型JSON #

将响应体解析为List<dynamic>，遍历每个元素并转换为ProductModel对象，再添加到列表中。

2. 修正ProductModel的字段映射 #

确保fromJson工厂方法中的键名与JSON返回的键完全匹配。

修正后的ProductController代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'package:restaurentapp/api_connection/api_connection.dart';
import 'package:restaurentapp/model/product_model.dart';

class ProductController extends GetxController {
  var productList = <ProductModel>[].obs;
  var isLoading = true.obs;

  @override
  void onInit() {
    super.onInit();
    fetchProduct();
  }

  Future<void> fetchProduct() async {
    final response = await http.get(Uri.parse(API.getCardDataProduct));
    if (response.statusCode == 200) {
      // 将响应体解析为List<dynamic>
      List<dynamic> productJsonList = jsonDecode(response.body);
      // 遍历数组，逐个转换为ProductModel对象
      productList.value = productJsonList
          .map((json) => ProductModel.fromJson(json))
          .toList();
      isLoading.value = false; // 数据加载完成后设置为false
    } else {
      Get.snackbar(
        "Error Loading data!",
        'Server Response: ${response.statusCode}: ${response.reasonPhrase.toString()}'
      );
      isLoading.value = false;
    }
  }
}

修正后的ProductModel代码

class ProductModel {
  String productId;
  String title;
  String product_reference;
  String product_price;
  String buying_price;
  String product_description;
  String product_category;
  String unitId;
  String productImagePath;

  ProductModel({
    required this.productId,
    required this.title,
    required this.product_reference,
    required this.product_price,
    required this.buying_price,
    required this.product_description,
    required this.product_category,
    required this.unitId,
    required this.productImagePath,
  });

  factory ProductModel.fromJson(Map<String, dynamic> json) {
    return ProductModel(
      productId: json['productId'],
      title: json['product_title'],
      product_reference: json['product_reference'],
      // 修正：JSON中的键是"price"，对应model的product_price
      product_price: json['price'],
      buying_price: json['buying_price'],
      // 修正：JSON中的键是"discription"（注意拼写），对应model的product_description
      product_description: json['discription'],
      // 修正：JSON中的键是"categoryId"，对应model的product_category
      product_category: json['categoryId'],
      unitId: json['unitId'],
      productImagePath: json['productImagePath'],
    );
  }
}

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