How to link a list and json file in flutter

Question

I'm creating a recipe app: essentially a user selects the ones he has from a list of ingredients and based on the selected elements the recipes he can make appear.

I have a database of recipes in json format (https://github.com/tabatkins/recipe-db/blob/master/db-recipes.json) from which I extracted some keywords from the 'ingredients' and made a list of them.

To fully understand how I should do it, for now I'm only taking into consideration one recipe and only the list of ingredients needed to find it.

In the file 'foodlistDEMO.dart' there's the ingredient's list:

List<String> ingredients = [
  'red pepper flakes',
  'panko',
  'lemon',
  'egg',
  'rosemary',
  'parsley',
  'garlic',
  'shallots',
  'butter',
  'white wine',
  'black pepper',
  'salt',
  'olive oil',
  'frozen shrimp',
];

This list comes from this recipe, that is in the file 'recipe2MODE.json':

{
  "2": {
  "id": "2",
  "name": "Baked Shrimp Scampi",
  "source": "Ina Garten: Barefoot Contessa Back to Basics",
  "preptime": 0,
  "waittime": 0,
  "cooktime": 0,
  "servings": 6,
  "comments": "Modified by reducing butter and salt.  Substituted frozen shrimp instead of fresh 12-15 count (butterflied, tails on).",
  "calories": 2565,
  "fat": 159,
  "satfat": 67,
  "carbs": 76,
  "fiber": 4,
  "sugar": 6,
  "protein": 200,
  "instructions": "Preheat the oven to 425 degrees F.\r\n\r\nDefrost shrimp by putting in cold water, then drain and toss with wine, oil, salt, and pepper. Place in oven-safe dish and allow to sit at room temperature while you make the butter and garlic mixture.\r\n\r\nIn a small bowl, mash the softened butter with the rest of the ingredients and some salt and pepper.\r\n\r\nSpread the butter mixture evenly over the shrimp. Bake for 10 to 12 minutes until hot and bubbly. If you like the top browned, place under a broiler for 1-3 minutes (keep an eye on it). Serve with lemon wedges and French bread.\r\n\r\nNote: if using fresh shrimp, arrange for presentation. Starting from the outer edge of a 14-inch oval gratin dish, arrange the shrimp in a single layer cut side down with the tails curling up and towards the center of the dish. Pour the remaining marinade over the shrimp. ",
  "ingredients": [
    "2\/3 cup panko\r",
    "1\/4 teaspoon red pepper flakes\r",
    "1\/2 lemon, zested and juiced\r",
    "1 extra-large egg yolk\r",
    "1 teaspoon rosemary, minced\r",
    "3 tablespoon parsley, minced\r",
    "4 clove garlic, minced\r",
    "1\/4 cup shallots, minced\r",
    "8 tablespoon unsalted butter, softened at room temperature\r",
    "<hr>",
    "2 tablespoon dry white wine\r",
    "Freshly ground black pepper\r",
    "Kosher salt\r",
    "3 tablespoon olive oil\r",
    "2 pound frozen shrimp"
  ],
  "tags": [
    "seafood",
    "shrimp",
    "main"
  ]
  }
}

In what I called Screen2 I am displaying the list of some foods ordered in a checklist and at the end of the page there is a button that takes me to Screen3:

import 'package:flutter/material.dart';
import 'screen3.dart';
import 'foodlistDEMO.dart';


class Screen2 extends StatefulWidget {
  const Screen2({super.key});

  @override
  Screen2State createState() => Screen2State();
}

class Screen2State extends State<Screen2> {

  // Lista per tenere traccia dello stato di spunta
  List<bool> checkedItems = List.generate(14, (index) => false);

  // Controller per la barra di ricerca
  TextEditingController searchController = TextEditingController();

  // Lista filtrata degli elementi in base alla ricerca
  List<String> filteredIngredients = [];

  @override
  void initState() {
    super.initState();

    // Inizializza la lista filtrata con la lista completa degli ingredienti
    filteredIngredients.addAll(ingredients);

    // Aggiungi un listener per intercettare le modifiche alla barra di ricerca
    searchController.addListener(() {
      filterIngredients();
    });

  }

  // Funzione per filtrare gli ingredienti in base alla ricerca
  void filterIngredients() {
    setState(() {
      filteredIngredients = ingredients
          .where((ingredient) =>
          ingredient.toLowerCase().contains(searchController.text.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return ScrollbarTheme(
      data: ScrollbarThemeData(
        thumbColor: MaterialStateProperty.all(Colors.deepOrange),
        thickness: MaterialStateProperty.all(8.0),
        radius: const Radius.circular(50),
      ),
      child: Scaffold(
        backgroundColor: Colors.deepOrange[50],
        appBar: AppBar(
          backgroundColor: Colors.deepOrange,
          elevation: 0.0,
        ),
        body: Column(
          children: <Widget>[
            const Padding(
              padding: EdgeInsets.all(16.0),
              child: Center(
                child: Text(
                  'Check what you have',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 2,
                    color: Colors.deepOrange,
                  ),
                ),
              ),
            ),
            // Barra di ricerca
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextField(
                controller: searchController,
                decoration: const InputDecoration(
                  labelText: 'Search for ingredients:',
                  // Cambia il colore del testo
                  labelStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 19, // Imposta la dimensione del carattere desiderata
                  ),
                  // Cambia il colore del bordo
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.black),
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.black),
                  ),
                ),
                cursorColor: Colors.black, // Questo imposta il colore del cursore
              ),
            ),
            // Lista filtrata degli ingredienti
            Expanded(
              child: ListView.builder(
                itemCount: filteredIngredients.length,
                itemBuilder: (context, index) {
                  return CheckboxListTile(
                    title: Text(filteredIngredients[index]),
                    value: checkedItems[ingredients.indexOf(filteredIngredients[index])],
                    onChanged: (value) {
                      setState(() {
                        checkedItems[ingredients.indexOf(filteredIngredients[index])] = value!;
                      });
                    },
                  );
                },
              ),
            ),

            Padding(
              padding: const EdgeInsets.all(16.0),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context, MaterialPageRoute(builder: (context) => const Screen3()),
                  );
                },
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.deepOrange),
                ),
                child: const Text('Discover the recipes!'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

In general, what I would like is that when the user selects one or more of the ingredients in the checklist the program looks under the 'ingredients' section of the json file and selects all the recipes that have the ingredient in that section searched for and then show them on screen3.

As regards the small case, therefore this one that I am proposing with only a recipe, I would like that when the user selects one or more ingredients from the list the program searches in the json file in which recipe they are present (in this case there is just one recipe) and then based on that you show me the recipe in screen3.

Answer 1

In this issue we hava to some solutions for fix that,

As my solution you need to first decode your json body into map , like bellow So you can use jsonDecode for cast to json into Map

List<MyCartProduct> parseProducts(String responseBody) {
    final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
    return parsed
        .map<MyCartProduct>((json) => MyCartProduct.fromJson(json))
        .toList();
  }

in this code Im parse my jsonbody into Map like this final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();

don't be hurry I'll provide to solution as your code,

import 'dart:convert'; // you can use this handling JSON data

String recipeJson = {
  "2": {
    // in this body have your body
  }
}

// we can Parse the JSON data ub to map remeber it should be Map<String,dynamic>
Map<String, dynamic> recipeData = json.decode(recipeJson);

// use model class access your data as esay
class Recipe {
  final String id;
  final String name;
  final List<String> ingredients;

  Recipe({required this.id, required this.name, required this.ingredients});
  
  factory Recipe.fromJson(Map<String, dynamic> json) {
    List<String> parsedIngredients = json['ingredients'].cast<String>();
    return Recipe(
      id: json['id'],
      name: json['name'],
      ingredients: parsedIngredients,
    );
  }
}

now we want get one recipe from that json data so like bellow code part,

Map<String, dynamic> recipeJsonData = recipeData['2'];
Recipe recipe = Recipe.fromJson(recipeJsonData);

// List of selected ingredients
List<String> selectedIngredients = [
  'red pepper flakes',
  'panko',
  'lemon',
  // ... add other selected ingredients here
];

// Filtering recipes based on selected ingredients
List<Recipe> filteredRecipes = [];

if (selectedIngredients.isNotEmpty) {
  recipeData.forEach((key, value) {
    Recipe currentRecipe = Recipe.fromJson(value);
    if (currentRecipe.ingredients.every((ingredient) => selectedIngredients.contains(ingredient))) {
      filteredRecipes.add(currentRecipe);
    }
  });
}

actually this is basic part for fix your issue so I think this ansswer will be help you and goodluck.