flutter - How to display Nested api data using model class in listview in Flutter?

Question

I am tried to display data in listview. I have Json Response as below.

 [
  {
    "success": 1,
    "subject": [
      {
        "subject_id": "5e32874c714fa",
        "subject_name": "Account",
        "image": "upload/subject/Account.png",
        "active": "1",
        "standard_id": "5d1594e283e1a",
        "medium_id": "5d15938aa1344"
      },
      {
        "subject_id": "5da9ff659fb7c",
        "subject_name": "Biology",
        "image": "upload/subject/03_logo-1164x484.png",
        "active": "1",
        "standard_id": "5d1594e283e1a",
        "medium_id": "5d15938aa1344"
      },
      {
        "subject_id": "5da9ff990b1c6",
        "subject_name": "Chemisty",
        "image": "upload/subject/02_logo-1168x490.png",
        "active": "1",
        "standard_id": "5d1594e283e1a",
        "medium_id": "5d15938aa1344"
      },
      {
        "subject_id": "5de76afbd064e",
        "subject_name": "Computer",
        "image": "upload/subject/07_logo-1169x486.png",
        "active": "1",
        "standard_id": "5d1594e283e1a",
        "medium_id": "5d15938aa1344"
      },
      {
        "subject_id": "5d788906c431b",
        "subject_name": "Devsatya Paperset March 2020",
        "image": "upload/subject/04_logo-1174x491.png",
        "active": "1",
        "standard_id": "5d1594e283e1a",
        "medium_id": "5d15938aa1344"
      }
    ]
  }
]

as above response i create a model class as below

 // To parse this JSON data, do
//
//     final subjectByUser = subjectByUserFromJson(jsonString);

import 'dart:convert';

List<SubjectByUser> subjectByUserFromJson(String str) =>
    List<SubjectByUser>.from(
        json.decode(str).map((x) => SubjectByUser.fromJson(x)));

String subjectByUserToJson(List<SubjectByUser> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class SubjectByUser {
  SubjectByUser({
    required this.success,
    required this.subject,
  });

  int success;
  List<Subject> subject;

  factory SubjectByUser.fromJson(Map<String, dynamic> json) => SubjectByUser(
        success: json["success"],
        subject:
            List<Subject>.from(json["subject"].map((x) => Subject.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "success": success,
        "subject": List<dynamic>.from(subject.map((x) => x.toJson())),
      };
}

class Subject {
  Subject({
    required this.subjectId,
    required this.subjectName,
    required this.image,
    required this.active,
    required this.standardId,
    required this.mediumId,
  });

  String subjectId;
  String subjectName;
  String image;
  String active;
  String standardId;
  String mediumId;

  factory Subject.fromJson(Map<String, dynamic> json) => Subject(
        subjectId: json["subject_id"],
        subjectName: json["subject_name"],
        image: json["image"],
        active: json["active"],
        standardId: json["standard_id"],
        mediumId: json["medium_id"],
      );

  Map<String, dynamic> toJson() => {
        "subject_id": subjectId,
        "subject_name": subjectName,
        "image": image,
        "active": active,
        "standard_id": standardId,
        "medium_id": mediumId,
      };
}

I write below code, now how can i display subjects data like subjectName, image, etc in list view? in print i can get the subject name on index 3.

Future getUserSubject(List subject) async {
    final subjectUrl =
        "$baseUrl/subject/get_by_user_plan?user_id=609cab2cd5b6c&order_id=1620889722609cd07a601af469889697609cab2cd5b6c&standard_id=5d1594e283e1a&medium_id=5d15938aa1344";
    

    final response = await http.get(Uri.parse(subjectUrl));
    final subjects = response.body;
    final decodedData = jsonDecode(subjects);
    SubjectByUserModel subjectByUserModel =
        SubjectByUserModel.fromJson(decodedData);
    print(subjectByUserModel.subject?[2].subjectName);
    
  }

I put all codes in separate file also view

标签： flutter

Answer 1

您可以使用 ListView.builder

ListView.builder(
    itemCount: subjectByUserModel.subject ?? 0,
    itemBuilder: (BuildContext context, int index) {
      print(subjectByUserModel.subject?[index].subjectName);
      print(subjectByUserModel.subject?[index].standardId); // so on
      // Now you can build any widget for per subject.
      // like card, listTile or simple text.
      return Text('');
    });