Livro de Receitas: A Lista de Receitas
Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 28 de 33.
Hora de criar um aplicativo completo com o que esta seção ensinou: um livro de receitas. Ele tem uma lista de receitas, uma tela para cada receita com seus ingredientes e uma aba com as suas favoritas.
Comece pelos dados. O aplicativo já tem uma classe Recipe com um nome, o tempo de preparo em minutos e uma lista de ingredientes, além de quatro receitas no início de build. O ingredients de cada receita é um List<String>: um campo também pode ser uma lista.
A primeira tela é a lista. Ela pode crescer até ter centenas de receitas, então crie-a com ListView.builder, usando um ListTile para cada receita.
Desafio
FácilSubstitua o texto No recipes yet pela lista de receitas:
- um
ListView.buildercom umListTilepor receita - cada bloco tem
Icons.restaurant_menucomo seuleading:, o nome da receita como título e20 min(com os minutos da receita) como subtítulo
Experimente você mesmo
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 lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Listas e telas
1Listas roláveis
Uma lista que rolaItens da listaInício e fimToque em um item da listaDivisórias entre linhas4Suas Próprias Classes
Uma Classe para Seus DadosParâmetros Nomeados e ObrigatóriosCampos que Podem Ficar VaziosWidgets a Partir de Dados com mapFiltre uma Lista com whereBusque em um Map7Projeto: Livro de Receitas
Livro de Receitas: A Lista de ReceitasLivro de Receitas: A Tela da ReceitaPratique por conta própria: Compilador de Flutter online