Libro de recetas: Ingredientes

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

La pantalla de la receta necesita lo que viniste a buscar: los ingredientes. Cada receta ya los contiene en su lista ingredients.

La pantalla también se convierte en una lista: la hora, un encabezado y después una fila por ingrediente. Un ListView con padding: los contiene a todos y sigue desplazándose cuando una receta tiene veinte ingredientes. Un for de colección sobre recipe.ingredients crea las filas.

La negrita y un tamaño mayor hacen que Ingredients se lea como un encabezado, así la vista encuentra la lista de inmediato.

Desafío

Fácil

Muestra los ingredientes en la pantalla de la receta. Haz que su cuerpo sea un ListView con un relleno de 16 píxeles que contenga:

el texto Ready in, como antes
un SizedBox de altura 24, seguido del encabezado Ingredients, de tamaño 20 y en negrita
un ListTile por ingrediente, con Icons.check_circle_outline como su leading:

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