Menu
CoddyTech

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

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

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

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

Widget recipeList(List<Recipe> shown) {
  return ListView.builder(...);
}

המועדפים הם המתכונים where favorite הוא true. חשבו אותם בראש build, כך שהכרטיסייה תהיה נכונה אחרי כל setState. גוף המסך יציג אז את recipeList(recipes) או את recipeList(favorites), בהתאם לכרטיסייה.

challenge icon

אתגר

קשה

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

  • העבר את 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});
}
quiz iconבחנו את עצמכם

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

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

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