Recipe Book: The Recipe Screen

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

A list of names is a start, but a recipe book is for cooking. Tapping a recipe should open its own screen.

That screen is a new widget class, RecipeScreen, that gets the recipe through its constructor. One class shows any recipe: the tile that was tapped decides which one, by passing its recipe when it pushes the screen.

Its app bar shows the recipe's name, and gets the back arrow on its own, because the list is under it in the stack.

Challenge

Medium

Make each recipe open a screen of its own:

write a RecipeScreen widget with a final Recipe recipe; field and a required this.recipe parameter
its app bar shows the recipe's name, and its body Ready in 20 minutes (with the recipe's minutes) in size 18, with 16 pixels of padding
tapping a tile pushes RecipeScreen(recipe: recipe)

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: 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'),
          );
        },
      ),
    );
  }
}

class Recipe {
  final String name;
  final int minutes;
  final List<String> ingredients;

  Recipe({required this.name, required this.minutes, required this.ingredients});
}