كتاب الوصفات: شاشة الوصفة
جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 29 من 33.
تُعدّ قائمة الأسماء بدايةً، لكن كتاب الوصفات مخصّص للطهي. ينبغي أن يؤدي النقر على وصفة إلى فتح شاشة خاصة بها.
هذه الشاشة فئة عنصر واجهة مستخدم جديدة، RecipeScreen، تتلقى الوصفة عبر مُنشئها. تعرض فئة واحدة أي وصفة: يحدد المربع الذي نُقر عليه الوصفةَ، بتمرير recipe عند دفع الشاشة إلى المكدس.
يعرض شريط التطبيق اسم الوصفة، ويظهر فيه سهم الرجوع تلقائيًا، لأن القائمة تقع تحته في المكدس.
التحدي
متوسطاجعل كل وصفة تفتح شاشة خاصة بها:
- اكتب عنصر واجهة
RecipeScreenيحتوي على الحقلfinal Recipe recipe;والمعاملrequired this.recipe - يعرض شريط التطبيق اسم الوصفة، ويعرض متن الشاشة
Ready in 20 minutes(مع عدد دقائق الوصفة) بحجم 18، مع مساحة داخلية قدرها 16 بكسل - يؤدي النقر على عنصر إلى الانتقال إلى
RecipeScreen(recipe: recipe)
جرّب بنفسك
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});
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس القوائم والشاشات
1قوائم قابلة للتمرير
قائمة قابلة للتمريرعناصر القائمةالبداية والنهايةاضغط على عنصر قائمةفواصل بين الصفوف4أصنافك الخاصة
صنف لبياناتكالمعاملات المُسمّاة والإلزاميةحقول يمكن أن تكون فارغةعناصر واجهة من البيانات باستخدام mapتصفية قائمة باستخدام whereالبحث في Map7المشروع: كتاب الوصفات
كتاب الوصفات: قائمة الوصفاتكتاب الوصفات: شاشة الوصفة6علامات التبويب والأدراج والتمرير بالسحب
علامات التبويب مع شريط تنقلأيقونات ممتلئة لعلامة التبويب المفتوحةدرج جانبياسحب للحذفالتراجع عن السحبتدرّب بنفسك: مترجم Flutter عبر الإنترنت