Recipe Book: The Recipe List

Part of the Lists and Screens section of Coddy's Flutter journey. Lesson 28 of 33.

Time to build a whole app with what this section taught: a recipe book. It has a list of recipes, a screen for each recipe with its ingredients, and a tab of your favorites.

Start with the data. The app already has a Recipe class with a name, the minutes it takes and a list of ingredients, and four recipes at the top of build. Each recipe's ingredients is a List<String>: a field can be a list, too.

The first screen is the list. It can grow to hundreds of recipes, so build it with ListView.builder, one ListTile per recipe.

Challenge

Easy

Replace the No recipes yet text with the list of recipes:

a ListView.builder with one ListTile per recipe
each tile has Icons.restaurant_menu as its leading:, the recipe's name as its title, and 20 min (with the recipe's minutes) as its subtitle

Try it yourself

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