Menu
CoddyTech
flag Ar iconالعربيةdown icon

كتاب الوصفات: المكونات

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 30 من 33.

تحتاج شاشة الوصفة إلى ما جئت من أجله: المكونات. تحتوي كل وصفة عليها بالفعل في قائمة ingredients.

تصبح الشاشة قائمة أيضًا: الوقت، ثم عنوان، ثم صف لكل مكوّن. يحتوي ListView مع padding: على جميع المكونات، ويظل قابلًا للتمرير عندما تحتوي الوصفة على عشرين مكوّنًا. ويُنشئ تكرار for على recipe.ingredients الصفوف.

يجعل الخط العريض والحجم الأكبر كلمة Ingredients تبدو كعنوان، فتصل العين إلى القائمة فورًا.

challenge icon

التحدي

سهل

اعرض المكونات على شاشة الوصفة. اجعل محتواها ListView مع مساحة داخلية قدرها 16 بكسل، ويحتوي على:

  • النص Ready in كما في السابق
  • عنصر SizedBox ارتفاعه 24، ثم العنوان Ingredients بحجم 20 وبخط عريض
  • عنصر ListTile واحد لكل مكوّن، مع Icons.check_circle_outline بوصفه leading:

جرّب بنفسك

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});
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس القوائم والشاشات

تدرّب بنفسك: مترجم Flutter عبر الإنترنت