Livre de recettes : Les ingrédients

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 30 sur 33.

L’écran de recette doit afficher ce que vous êtes venu chercher : les ingrédients. Chaque recette les contient déjà dans sa liste ingredients.

L’écran devient lui aussi une liste : l’heure, un titre, puis une ligne par ingrédient. Un ListView avec padding: les contient tous et reste défilable même lorsqu’une recette comporte vingt ingrédients. Une boucle de collection for sur recipe.ingredients crée les lignes.

Le texte en gras et de plus grande taille fait de Ingredients un titre, ce qui permet de repérer immédiatement la liste.

Défi

Facile

Affiche les ingrédients sur l’écran de la recette. Fais de son corps une ListView avec un padding de 16 pixels, contenant :

le texte Ready in, comme précédemment
une SizedBox d’une hauteur de 24, puis le titre Ingredients, de taille 20 et en gras
un ListTile par ingrédient, avec Icons.check_circle_outline comme leading:

Essayez vous-même

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final List<Recipe> recipes = [
      Recipe(name: 'Pancakes', minutes: 20, ingredients: ['Flour', 'Eggs', 'Milk', 'Butter']),
      Recipe(name: 'Tomato Soup', minutes: 35, ingredients: ['Tomatoes', 'Onion', 'Garlic', 'Olive oil']),
      Recipe(name: 'Guacamole', minutes: 10, ingredients: ['Avocados', 'Lime', 'Onion', 'Salt']),
      Recipe(name: 'Fried Rice', minutes: 25, ingredients: ['Rice', 'Eggs', 'Peas', 'Soy sauce']),
    ];
    return Scaffold(
      appBar: AppBar(title: const Text('Recipe Book')),
      body: ListView.builder(
        itemCount: recipes.length,
        itemBuilder: (context, index) {
          final Recipe recipe = recipes[index];
          return ListTile(
            leading: const Icon(Icons.restaurant_menu),
            title: Text(recipe.name),
            subtitle: Text('${recipe.minutes} min'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => RecipeScreen(recipe: recipe)),
              );
            },
          );
        },
      ),
    );
  }
}

class RecipeScreen extends StatelessWidget {
  const RecipeScreen({super.key, required this.recipe});

  final Recipe recipe;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(recipe.name)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
      ),
    );
  }
}

class Recipe {
  final String name;
  final int minutes;
  final List<String> ingredients;

  Recipe({required this.name, required this.minutes, required this.ingredients});
}