ספר מתכונים: לשונית המועדפים
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 32 מתוך 33.
לבבות שימושיים רק אם אפשר למצוא שוב את המתכונים המועדפים עליך. כרטיסייה שנייה, Favorites, מציגה רק את המתכונים עם לב אדום.
שתי הכרטיסיות מציגות רשימת מתכונים שנראית זהה, לכן כתבו את הרשימה פעם אחת, כשיטה שמקבלת את המתכונים להצגה:
Widget recipeList(List<Recipe> shown) {
return ListView.builder(...);
}המועדפים הם המתכונים where favorite הוא true. חשבו אותם בראש build, כך שהכרטיסייה תהיה נכונה אחרי כל setState. גוף המסך יציג אז את recipeList(recipes) או את recipeList(favorites), בהתאם לכרטיסייה.
אתגר
קשההוסף לשוניות לספר המתכונים:
- העבר את
ListView.builderלתוך מתודהWidget recipeList(List<Recipe> shown)שמציגה אתshown - הוסף
NavigationBarעם שתי לשוניות:Recipes(Icons.menu_book_outlined,Icons.menu_bookכשהיא נבחרת) ו-Favorites(Icons.star_border,Icons.starכשהיא נבחרת), ושמור את ה-indexשל הלשונית במצב - לשונית Recipes מציגה את כל המתכונים, ולשונית Favorites מציגה רק את המתכונים המועדפים
נסו בעצמכם
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 StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
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']),
];
@override
Widget build(BuildContext context) {
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)),
);
},
trailing: IconButton(
icon: Icon(
recipe.favorite ? Icons.favorite : Icons.favorite_border,
color: recipe.favorite ? Colors.red : null,
),
onPressed: () {
setState(() {
recipe.favorite = !recipe.favorite;
});
},
),
);
},
),
);
}
}
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;
bool favorite = false;
Recipe({required this.name, required this.minutes, required this.ingredients});
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה רשימות ומסכים
4המחלקות שלכם
מחלקה לנתונים שלכםפרמטרים בעלי שם ונדרשיםשדות שיכולים להיות ריקיםיצירת Widgets מנתונים באמצעות mapסינון רשימה באמצעות whereחיפוש ב־Map7פרויקט: ספר מתכונים
ספר מתכונים: רשימת המתכוניםספר מתכונים: מסך המתכון6כרטיסיות, מגירות והחלקות
כרטיסיות עם סרגל ניווטאייקונים מלאים לכרטיסייה הפתוחהמגירה צדדיתהחלקה למחיקהביטול החלקהתרגלו בעצמכם: קומפיילר Flutter אונליין