Menu
CoddyTech

ספר מתכונים: רשימת המתכונים

חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 28 מתוך 33.

הגיע הזמן לבנות אפליקציה שלמה עם מה שלמדת ביחידה הזאת: ספר מתכונים. יש בה רשימת מתכונים, מסך לכל מתכון עם המרכיבים שלו, וכרטיסייה של המועדפים שלך.

מתחילים עם הנתונים. באפליקציה כבר יש מחלקה בשם Recipe עם שם, משך ההכנה בדקות ורשימת מרכיבים, וארבעה מתכונים בראש build. ingredients של כל מתכון הוא List<String>: גם שדה יכול להיות רשימה.

המסך הראשון הוא הרשימה. היא יכולה לגדול למאות מתכונים, לכן בונים אותה בעזרת ListView.builder, עם ListTile אחד לכל מתכון.

challenge icon

אתגר

קל

החליפו את הטקסט 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});
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה רשימות ומסכים

תרגלו בעצמכם: קומפיילר Flutter אונליין