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

كتاب الوصفات: قائمة الوصفات

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

حان وقت إنشاء تطبيق متكامل باستخدام ما تعلّمته في هذا القسم: كتاب وصفات. يضم قائمة بالوصفات، وشاشة لكل وصفة تعرض مكوّناتها، وعلامة تبويب للمفضّلة.

ابدأ بالبيانات. يحتوي التطبيق بالفعل على صنف Recipe يضم اسمًا، وعدد الدقائق اللازمة، وقائمة بالمكوّنات، وأربع وصفات في أعلى build. قيمة ingredients لكل وصفة هي List<String>: يمكن أن يكون الحقل قائمة أيضًا.

الشاشة الأولى هي القائمة. قد تضم مئات الوصفات، لذا أنشئها باستخدام ListView.builder، مع عنصر ListTile واحد لكل وصفة.

challenge icon

التحدي

سهل

استبدل النص No recipes yet بقائمة الوصفات:

  • استخدم ListView.builder مع عنصر ListTile واحد لكل وصفة
  • يحتوي كل عنصر على Icons.restaurant_menu بوصفه leading:، واسم الوصفة عنوانًا له، و20 min (مع عدد دقائق الوصفة) عنوانًا فرعيًا له

جرّب بنفسك

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: const Center(
        child: Text('No recipes yet'),
      ),
    );
  }
}

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 عبر الإنترنت