Tarif Kitabı: Tarif Ekranı

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 29 / 33.

Adlar listesi bir başlangıçtır, ancak bir tarif kitabı yemek pişirmek içindir. Bir tarife dokunulduğunda kendi ekranı açılmalıdır.

Bu ekran, tarifi kurucusu aracılığıyla alan yeni bir widget sınıfı olan RecipeScreen'dir. Tek bir sınıf herhangi bir tarifi gösterir: Hangisinin gösterileceğine dokunulan kutucuk karar verir; ekranı açarken recipe değerini iletir.

Uygulama çubuğu tarifin adını gösterir ve geri okunu kendiliğinden alır; çünkü liste, yığında onun altındadır.

Görev

Orta

Her tarifin kendine ait bir ekran açmasını sağlayın:

RecipeScreen widget'ını, final Recipe recipe; alanını ve required this.recipe parametresini yazarak oluşturun
uygulama çubuğu tarifin adını, gövdesi ise 18 punto boyutunda ve 16 piksel dolgu ile Ready in 20 minutes metnini (tarifin dakika bilgisiyle) gösterir
bir kutucuğa dokunulduğunda RecipeScreen(recipe: recipe) açılır

Kendin dene

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