Libro de recetas: La pantalla de la receta

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 29 de 33.

Una lista de nombres es un comienzo, pero un libro de recetas sirve para cocinar. Al tocar una receta, debería abrirse su propia pantalla.

Esa pantalla es una nueva clase de widget, RecipeScreen, que recibe la receta a través de su constructor. Una sola clase muestra cualquier receta: el elemento que se tocó decide cuál, pasando su recipe al abrir la pantalla.

La barra de la aplicación muestra el nombre de la receta y obtiene la flecha para volver automáticamente, porque la lista está debajo en la pila.

Desafío

Intermedio

Haz que cada receta abra su propia pantalla:

escribe un widget RecipeScreen con un campo final Recipe recipe; y un parámetro required this.recipe
su barra de aplicaciones muestra el nombre de la receta, y su cuerpo muestra Ready in 20 minutes (con los minutos de la receta) en tamaño 18, con 16 píxeles de relleno
al tocar un elemento, se abre RecipeScreen(recipe: recipe)

Pruébalo tú mismo

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