Livre de recettes : Les favoris

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

Certaines recettes, vous les cuisinez chaque semaine. Un cœur à la fin de chaque ligne indique une recette favorite : un cœur vide si elle ne l’est pas, un cœur rouge rempli si elle l’est.

Le fait qu’une recette soit favorite fait partie de la recette, c’est donc un champ. Contrairement aux autres, il change : il n’est donc pas final, et commence à false :

bool favorite = false;

Les données qui changent nécessitent setState, donc HomeScreen devient un StatefulWidget. Les recettes sortent de build pour rejoindre la classe State : une liste créée dans build est recréée à chaque setState, et tous les cœurs redeviendraient vides.

Le cœur est un IconButton. Son icône choisit le cœur rempli ou vide avec ? :, et une pression inverse la valeur du champ : recipe.favorite = !recipe.favorite.

Défi

Difficile

Ajoutez un cœur pour marquer chaque recette comme favorite :

ajoutez à Recipe un champ bool favorite = false;
transformez HomeScreen en StatefulWidget et déplacez la liste des recettes dans sa classe State
ajoutez à chaque tuile un trailing: IconButton affichant Icons.favorite_border, ou Icons.favorite en rouge lorsque la recette est favorite. Une pression inverse la valeur de favorite

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: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
          const SizedBox(height: 24),
          const Text('Ingredients', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          for (String ingredient in recipe.ingredients)
            ListTile(
              leading: const Icon(Icons.check_circle_outline),
              title: Text(ingredient),
            ),
        ],
      ),
    );
  }
}

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

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