Livre de recettes : La liste des recettes

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 28 sur 33.

Il est temps de créer une application complète avec ce que cette section vous a appris : un livre de recettes. Elle contient une liste de recettes, un écran pour chaque recette avec ses ingrédients et un onglet consacré à vos favoris.

Commencez par les données. L’application possède déjà une classe Recipe avec un nom, le temps de préparation en minutes et une liste d’ingrédients, ainsi que quatre recettes en haut de build. La propriété ingredients de chaque recette est une List<String> : un champ peut aussi être une liste.

Le premier écran est la liste. Elle peut contenir des centaines de recettes, alors créez-la avec ListView.builder, avec un ListTile par recette.

Défi

Facile

Remplace le texte No recipes yet par la liste des recettes :

un ListView.builder avec un ListTile par recette
chaque élément comporte Icons.restaurant_menu comme leading:, le nom de la recette comme titre et 20 min (avec le nombre de minutes de la recette) comme sous-titre

Essayez vous-même

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