كتاب الوصفات: قائمة الوصفات
جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 28 من 33.
حان وقت إنشاء تطبيق متكامل باستخدام ما تعلّمته في هذا القسم: كتاب وصفات. يضم قائمة بالوصفات، وشاشة لكل وصفة تعرض مكوّناتها، وعلامة تبويب للمفضّلة.
ابدأ بالبيانات. يحتوي التطبيق بالفعل على صنف Recipe يضم اسمًا، وعدد الدقائق اللازمة، وقائمة بالمكوّنات، وأربع وصفات في أعلى build. قيمة ingredients لكل وصفة هي List<String>: يمكن أن يكون الحقل قائمة أيضًا.
الشاشة الأولى هي القائمة. قد تضم مئات الوصفات، لذا أنشئها باستخدام ListView.builder، مع عنصر ListTile واحد لكل وصفة.
التحدي
سهلاستبدل النص 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});
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس القوائم والشاشات
1قوائم قابلة للتمرير
قائمة قابلة للتمريرعناصر القائمةالبداية والنهايةاضغط على عنصر قائمةفواصل بين الصفوف4أصنافك الخاصة
صنف لبياناتكالمعاملات المُسمّاة والإلزاميةحقول يمكن أن تكون فارغةعناصر واجهة من البيانات باستخدام mapتصفية قائمة باستخدام whereالبحث في Map7المشروع: كتاب الوصفات
كتاب الوصفات: قائمة الوصفاتكتاب الوصفات: شاشة الوصفة6علامات التبويب والأدراج والتمرير بالسحب
علامات التبويب مع شريط تنقلأيقونات ممتلئة لعلامة التبويب المفتوحةدرج جانبياسحب للحذفالتراجع عن السحبتدرّب بنفسك: مترجم Flutter عبر الإنترنت