Książka kucharska: Ekran przepisu

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 29 z 33.

Lista nazw to początek, ale książka kucharska służy do gotowania. Dotknięcie przepisu powinno otworzyć jego własny ekran.

Ten ekran to nowa klasa widgetu RecipeScreen, która otrzymuje przepis przez konstruktor. Jedna klasa wyświetla dowolny przepis: kafelek, którego dotknięto, wybiera właściwy, przekazując jego recipe podczas otwierania ekranu.

Pasek aplikacji wyświetla nazwę przepisu, a strzałka powrotu pojawia się w nim automatycznie, ponieważ lista znajduje się pod nim na stosie.

Wyzwanie

Średni

Spraw, aby każdy przepis otwierał osobny ekran:

napisz widżet RecipeScreen z polem final Recipe recipe; i parametrem required this.recipe
jego pasek aplikacji wyświetla nazwę przepisu, a treść Ready in 20 minutes (z liczbą minut dla przepisu) w rozmiarze 18, z 16 pikselami dopełnienia
dotknięcie kafelka otwiera RecipeScreen(recipe: recipe)

Spróbuj swoich sił

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