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