Livre de recettes : L’écran de la recette

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

Une liste de noms, c’est un début, mais un livre de recettes sert à cuisiner. Appuyer sur une recette doit ouvrir son propre écran.

Cet écran est une nouvelle classe de widget, RecipeScreen, qui reçoit la recette par son constructeur. Une seule classe affiche n’importe quelle recette : la tuile sur laquelle on a appuyé détermine laquelle, en transmettant son recipe lorsqu’elle ouvre l’écran.

Sa barre d’application affiche le nom de la recette et ajoute automatiquement la flèche de retour, car la liste se trouve en dessous dans la pile.

Défi

Moyen

Fais en sorte que chaque recette ouvre son propre écran :

écris un widget RecipeScreen avec un champ final Recipe recipe; et un paramètre required this.recipe
sa barre d’application affiche le nom de la recette, et son corps affiche Ready in 20 minutes (avec le nombre de minutes de la recette) en taille 18, avec un remplissage de 16 pixels
appuyer sur une tuile ouvre RecipeScreen(recipe: recipe)

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'),
          );
        },
      ),
    );
  }
}

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

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