flutter - How to parse complex nested json

Question

I am trying to parse a sample json format . In my sample json format contains simple array list inside this list contains another list which have some data. The format as below.

[
 {
   title: "Biryani",
   description: "Chicken Biryani",
   ingredients: [
                 {
                   title: "basmati rice",
                   quantity: "1 cup"
                 },
                 {
                   title: "mint leaves",
                   quantity: "1/2 teaspoon"
                 },
                 {
                   title: "salt",
                   quantity: "as required"
                 }
              ]
        },
        {

  title: "Chicken Tiika",
  description: "Chicken Biryani",
  ingredients: [
                 {
                    title: "basmati rice",
                    quantity: "1 cup"
                 },
                {
                    title: "mint leaves",
                    quantity: "1/2 teaspoon"
                },
                {
                    title: "salt",
                    quantity: "as required"
                }
              ]
  }
]

After parse the Data

import 'dart:convert';

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

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

class Model {
     Model({
      this.title,
      this.description,
     this.ingredients,
   });

   String title;
  String description;
  List<Ingredient> ingredients;

    factory Model.fromJson(Map<String, dynamic> json) => Model(
    title: json["title"],
    description: json["description"],
    ingredients: List<Ingredient>.from(
        json["ingredients"].map((x) => Ingredient.fromJson(x))),
  );

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

class Ingredient {
   Ingredient({
         this.title,
         this.quantity,
    });

     String title;
     String quantity;

    factory Ingredient.fromJson(Map<String, dynamic> json) => Ingredient(
    title: json["title"],
    quantity: json["quantity"],
  );

  Map<String, dynamic> toJson() => {
    "title": title,
    "quantity": quantity,
   };
 }

After this I have made simple function to get all the data The problem is that I am not getting the data which is inside my main list please help to get the Ingredient data

import 'package:find_recipe/sample_model.dart';
import 'package:http/http.dart' as http;

Future<List<Model>> sample_api() async {
    try {
          final repsone =
           await http.get("https://webrooper.com/androiddb/sample.php");

          return modelFromJson(repsone.body);

        } catch (e) {
             return e;
        }
     }

I am trying to get data like this.

body: FutureBuilder(
    future: _future,
    builder: (context, snapshot) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Text(snapshot.data[index].title),
              Text(snapshot.data[index].ingredients.quantity)
            ],
          );
        },
      );
    },
  ),

But it is showing 'List<Ingredient>' has no instance getter 'quantity'. Please help me for this

Answer 1

等待大神答复