Menu
CoddyTech

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.

challenge icon

Desafio

Fácil

Substitua o texto No recipes yet pela lista de receitas:

  • um ListView.builder com um ListTile por receita
  • cada bloco tem Icons.restaurant_menu como seu leading:, o nome da receita como título e 20 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});
}
quiz iconTeste seus conhecimentos

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

Pratique por conta própria: Compilador de Flutter online