ספר מתכונים: מסך המתכון
חלק מהיחידה רשימות ומסכים במסלול ה-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});
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה רשימות ומסכים
4המחלקות שלכם
מחלקה לנתונים שלכםפרמטרים בעלי שם ונדרשיםשדות שיכולים להיות ריקיםיצירת Widgets מנתונים באמצעות mapסינון רשימה באמצעות whereחיפוש ב־Map7פרויקט: ספר מתכונים
ספר מתכונים: רשימת המתכוניםספר מתכונים: מסך המתכון6כרטיסיות, מגירות והחלקות
כרטיסיות עם סרגל ניווטאייקונים מלאים לכרטיסייה הפתוחהמגירה צדדיתהחלקה למחיקהביטול החלקהתרגלו בעצמכם: קומפיילר Flutter אונליין