Ricettario: gli ingredienti

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 30 di 33.

La schermata della ricetta ha ciò che cercavi: gli ingredienti. Ogni ricetta li contiene già nella sua lista ingredients.

Anche la schermata diventa una lista: il tempo, un’intestazione, poi una riga per ogni ingrediente. Una ListView con padding: li contiene tutti e continua a scorrere anche quando una ricetta ha venti ingredienti. Un for di raccolta su recipe.ingredients crea le righe.

Il grassetto e una dimensione maggiore fanno apparire Ingredients come un’intestazione, così l’occhio individua subito la lista.

Sfida

Facile

Mostra gli ingredienti nella schermata della ricetta. Crea il body con una ListView con 16 pixel di padding, che contenga:

il testo Ready in, come prima
una SizedBox con altezza 24, poi l'intestazione Ingredients, con dimensione 20 e in grassetto
un ListTile per ogni ingrediente, con Icons.check_circle_outline come leading:

Provalo tu

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