ספר מתכונים: מועדפים
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 31 מתוך 33.
יש מתכונים שמבשלים בכל שבוע. לב בסוף כל שורה מסמן מתכון מועדף: לב ריק כשהמתכון אינו מועדף, ולב אדום מלא כשהוא מועדף.
השאלה אם מתכון הוא מועדף היא חלק מהמתכון, ולכן היא הופכת לשדה. בניגוד לשדות האחרים, הערך שלה משתנה, ולכן היא אינה final, והיא מתחילה כ־false:
bool favorite = false;נתונים שמשתנים זקוקים ל־setState, ולכן HomeScreen הופך ל־StatefulWidget. המתכונים יוצאים מ־build ועוברים למחלקת State: רשימה שנוצרת בתוך build נוצרת מחדש בכל setState, וכל הלבבות יהפכו לריקים.
הלב הוא IconButton. הסמל שלו בוחר בלב המלא או בלב הריק בעזרת ? :, והלחיצה עליו הופכת את ערך השדה: recipe.favorite = !recipe.favorite.
אתגר
קשההוסף לב של מועדפים לכל מתכון:
- הוסף ל-
Recipeשדהbool favorite = false; - הפוך את
HomeScreenל-StatefulWidgetוהעבר את רשימת המתכונים למחלקת ה-Stateשלו - הוסף לכל אריח
trailing:מסוגIconButtonשמציג אתIcons.favorite_border, או אתIcons.favoriteבאדום כאשר המתכון הוא מועדף. לחיצה עליו מחליפה את הערך שלfavorite
נסו בעצמכם
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: ListView(
padding: const EdgeInsets.all(16),
children: [
Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
const SizedBox(height: 24),
const Text('Ingredients', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
for (String ingredient in recipe.ingredients)
ListTile(
leading: const Icon(Icons.check_circle_outline),
title: Text(ingredient),
),
],
),
);
}
}
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 אונליין