Menu
CoddyTech

Libro de recetas: La lista de recetas

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

Es hora de crear una aplicación completa con lo que enseña esta sección: un libro de recetas. Tiene una lista de recetas, una pantalla para cada receta con sus ingredientes y una pestaña con tus favoritas.

Empieza con los datos. La aplicación ya tiene una clase Recipe con un nombre, el tiempo en minutos que lleva y una lista de ingredientes, y cuatro recetas al principio de build. El ingredients de cada receta es un List<String>: un campo también puede ser una lista.

La primera pantalla es la lista. Puede crecer hasta tener cientos de recetas, así que créala con ListView.builder, con un ListTile por receta.

challenge icon

Desafío

Fácil

Reemplaza el texto No recipes yet por la lista de recetas:

  • un ListView.builder con un ListTile por receta
  • cada elemento tiene Icons.restaurant_menu como su leading:, el nombre de la receta como título y 20 min (con los minutos de la receta) como subtítulo

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: const Center(
        child: Text('No recipes yet'),
      ),
    );
  }
}

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

  Recipe({required this.name, required this.minutes, required this.ingredients});
}
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Listas y pantallas

Practica por tu cuenta: Compilador de Flutter online