ספר מתכונים: עדיין אין מועדפים
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 33 מתוך 33.
פתח את הכרטיסייה Favorites לפני שמוסיפים משהו למועדפים: המסך ריק, ומסך ריק נראה כאילו משהו התקלקל. רשימה ריקה צריכה להסביר למה היא ריקה.
הערך isEmpty של רשימה הוא true כשאין בה פריטים. בחר את הדף בתוך build באמצעות if, לפני ה-return:
Widget page;
if (index == 0) {
page = recipeList(recipes);
} else if (favorites.isEmpty) {
page = const Center(child: Text('No favorites yet'));
} else {
page = recipeList(favorites);
}משתנה מסוג Widget יכול להכיל כל רכיב, לכן page הוא רשימה בענף אחד והודעה בענף אחר. הגוף של Scaffold הוא אז page.
אתגר
קלכשאין מה להציג בכרטיסייה Favorites, הצגי במרכז המסך את No favorites yet בגודל 18, במקום הרשימה הריקה. לאחר שמסמנים מתכון כמועדף, הוא מופיע שוב בכרטיסייה.
נסו בעצמכם
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']),
];
int index = 0;
Widget recipeList(List<Recipe> shown) {
return ListView.builder(
itemCount: shown.length,
itemBuilder: (context, i) {
final Recipe recipe = shown[i];
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;
});
},
),
);
},
);
}
@override
Widget build(BuildContext context) {
final List<Recipe> favorites = recipes.where((recipe) => recipe.favorite).toList();
return Scaffold(
appBar: AppBar(title: const Text('Recipe Book')),
body: index == 0 ? recipeList(recipes) : recipeList(favorites),
bottomNavigationBar: NavigationBar(
selectedIndex: index,
onDestinationSelected: (int i) {
setState(() {
index = i;
});
},
destinations: const [
NavigationDestination(
icon: Icon(Icons.menu_book_outlined),
selectedIcon: Icon(Icons.menu_book),
label: 'Recipes',
),
NavigationDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: 'Favorites',
),
],
),
);
}
}
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 אונליין