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.
Desafío
FácilReemplaza el texto No recipes yet por la lista de recetas:
- un
ListView.buildercon unListTilepor receta - cada elemento tiene
Icons.restaurant_menucomo suleading:, el nombre de la receta como título y20 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});
}
Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Listas y pantallas
1Listas con desplazamiento
Una lista desplazableElementos de listaAl principio y al finalToca un elemento de listaSeparadores entre filas4Tus propias clases
Una clase para tus datosParámetros con nombre y obligatoriosCampos que pueden estar vacíosWidgets a partir de datos con mapFiltrar una lista con whereBuscar en un mapa7Proyecto: Libro de recetas
Libro de recetas: La lista de recetasLibro de recetas: La pantalla de la receta3Tarjetas y cuadrículas
Tarjetas en una listaUna cuadrícula de mosaicosUna cuadrícula creada con un constructor6Pestañas, cajones y deslizamientos
Pestañas con una barra de navegaciónIconos rellenos para la pestaña abiertaUn cajón lateralDeslizar para eliminarDeshacer un deslizamientoPractica por tu cuenta: Compilador de Flutter online