ספר מתכונים: מרכיבים
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 30 מתוך 33.
במסך המתכון מופיע הדבר שבאתם בשבילו: המרכיבים. כל מתכון כבר כולל אותם ברשימת ingredients שלו.
גם המסך הופך לרשימה: הזמן, כותרת, ואז שורה אחת לכל מרכיב. ListView עם padding: מכיל את כולם ועדיין מאפשר גלילה כשבמתכון יש עשרים מרכיבים. לולאת for על recipe.ingredients יוצרת את השורות.
כתב מודגש וגודל גדול יותר גורמים ל־Ingredients להיראות כמו כותרת, כך שהעין מוצאת את הרשימה מיד.
אתגר
קלהציגו את המרכיבים במסך המתכון. הפכו את גוף המסך ל־ListView עם ריפוד של 16 פיקסלים, ובתוכו:
- הטקסט
Ready in, כמו קודם SizedBoxבגובה 24, ולאחריו הכותרתIngredients, בגודל 20 ובכתב מודגשListTileאחד לכל מרכיב, עםIcons.check_circle_outlineבתורleading:
נסו בעצמכם
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: 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)),
);
},
);
},
),
);
}
}
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: Padding(
padding: const EdgeInsets.all(16),
child: Text('Ready in ${recipe.minutes} minutes', style: const TextStyle(fontSize: 18)),
),
);
}
}
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 אונליין