How to manage http request content? Flutter/Dart

I have print my http response.body which is:

I/flutter (30828): {"firstName":"Georgee","lastName":"Contructed","userID":256,"month":8,"year":2022,"cardBills":[{"serial":"281929282881","value":4.8150,"vat":1.1556,"total":5.9706,"energy":0},{"serial":"281929282881","value":1.0567,"vat":0.2536,"total":1.3103,"energy":0}],"cardBillsTotal":[{"serial":"281929282881","value":5.8717,"vat":1.4092,"total":7.2809,"energy":0}]}

I want to transfer it into a list and use the variables, how can i do that?
here is also my code:

  initState() {
    fetch();
  }

  List<Evsebill> parseBills(String responseBody) {
    final parsed = jsonDecode(responseBody)['cardBills'].cast<Map<String, dynamic>>();

    return parsed.map<Evsebill>((json) => Evsebill.fromJson(json)).toList();
  }

  Future<List<Evsebill>> fetch() async {
    String? token = await this.storage.read(key: "token");
    Map<String, String> headers = {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": "Bearer " + (token ?? ""),
    };
    final response = await http.get(Uri.parse(this.serverIP + ':' + this.serverPort + '/user/contractedChargeTransactions?month=8&year=2022'), headers: headers);

    // Use the compute function to run parsePhotos in a separate isolate.
    print(response.body);
    return parseBills(response.body);
  }

This is my class:

class Evsebill {
  final int serial;
  final double value;
  final double vat;
  final double total;
  final int energy;
 const Evsebill({
    required this.serial,
    required this.value,
    required this.vat,
    required this.total,
    required this.energy
  });
  factory Evsebill.fromJson(Map<String, dynamic> json) {
    return Evsebill(
      serial: json['serial'] as int,
      value: json['value']as double,
      vat: json['vat']as double,
      total: json['total']as double,
      energy: json['energy']as int,
    );
  }
}

………………………………

>Solution :

First you need to decode your response body, this return you a map, after that by calling ['cardBills'] you receive a list(but you cast it to a map) and you can parse that list. Try this:

Future<List<Evsebill>> fetch() async {
    String? token = await this.storage.read(key: "token");
    Map<String, String> headers = {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": "Bearer " + (token ?? ""),
    };
    final response = await http.get(Uri.parse(this.serverIP + ':' + this.serverPort + '/user/contractedChargeTransactions?month=8&year=2022'), headers: headers);

    // Use the compute function to run parsePhotos in a separate isolate.
    print(response.body);
    List cardBills = jsonDecode(response.body)["cardBills"] as List; // <--- add this
    return cardBills.map((e) => Evsebill.fromJson(e)).toList(); // <--- add this
  }

Also in your model class the serial type is not int, it is String so change it:

class Evsebill {
  final String serial; // <---- change here
  final double value;
  final double vat;
  final double total;
  final int energy;
 const Evsebill({
    required this.serial,
    required this.value,
    required this.vat,
    required this.total,
    required this.energy
  });
  factory Evsebill.fromJson(Map<String, dynamic> json) {
    return Evsebill(
      serial: json['serial'] as String, // <---- change here
      value: json['value']as double,
      vat: json['vat']as double,
      total: json['total']as double,
      energy: json['energy']as int,
    );
  }
}