Tarif Kitabı: Malzemeler

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

Tarif ekranında aradığınız şey gerekli: malzemeler. Her tarif, bunları zaten ingredients listesinde içeriyor.

Ekran da bir listeye dönüşüyor: önce süre, sonra bir başlık, ardından her malzeme için bir satır. padding: içeren bir ListView hepsini tutar ve tarifte yirmi malzeme olduğunda bile kaydırılabilir. recipe.ingredients üzerinde kullanılan bir koleksiyon for döngüsü satırları oluşturur.

Kalın yazı ve daha büyük punto, Ingredients metninin başlık gibi görünmesini sağlar; böylece göz listeyi hemen bulur.

Görev

Kolay

Malzemeleri tarif ekranında göster. Ekranın gövdesini 16 piksel dolgulu bir ListView yap ve içine şunları koy:

önceki gibi Ready in metnini
yüksekliği 24 olan bir SizedBox, ardından 20 punto ve kalın Ingredients başlığını
her malzeme için, leading: değeri Icons.check_circle_outline olan bir ListTile

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'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => RecipeScreen(recipe: recipe)),
              );
            },
          );
        },
      ),
    );
  }
}

class RecipeScreen extends StatelessWidget {
  const RecipeScreen({super.key, required this.recipe});

  final Recipe recipe;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(recipe.name)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
      ),
    );
  }
}

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

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