מעקב הרגלים: ההרגלים שלך
חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 28 מתוך 36.
האפליקציה האחרונה היא מעקב הרגלים: כרטיס לכל הרגל עם סימון לכל יום בשבוע, רצף, טבעת שמתמלאת ככל שהשבוע שלך מתקדם היטב, ומצב כהה. זה סוג האפליקציות שאנשים פותחים מדי יום.
הנתונים נמצאים בקובצי ההתחלה. ל-Habit יש שם ושבעה ערכי bool, מיום שני עד יום ראשון:
Habit('Drink water', [true, true, true, false, true, false, false]),
Habit('Stretch', List.filled(7, false)),List.filled(7, false) יוצרת רשימה של שבעה ערכי false, שבוע שבו לא נעשה דבר.
התחל בכרטיס אחד לכל הרגל. עד סוף התהליך יש הרבה תוכן בתוך הכרטיס, ולכן הוא מקבל ווידג'ט משלו, HabitCard, שמקבל Habit. המסך נשאר קצר: ListView עם HabitCard אחד לכל הרגל. השאר מקום בתחתית הרשימה (88 פיקסלים) לכפתור שיצוף שם בהמשך.
אתגר
קלהציגו את ההרגלים:
- כתבו רכיב
HabitCardשמקבלrequiredhabitומציג את שמו בסגנוןtitleMediumשל העיצוב - הכרטיס הוא
Cardעםmargin: const EdgeInsets.only(top: 12), ובתוכוColumnעם ריפוד של 16 פיקסלים מסביב (בקרוב יתווספו אליו ילדים נוספים) - החליפו את
Centerב-ListViewעם ריפודEdgeInsets.fromLTRB(16, 8, 16, 88)ורכיבHabitCardעבור כל הרגל
נסו בעצמכם
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
),
home: const HabitScreen(),
);
}
}
const List<String> dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
class Habit {
Habit(this.name, this.days);
final String name;
final List<bool> days;
}
class HabitScreen extends StatefulWidget {
const HabitScreen({super.key});
@override
State<HabitScreen> createState() => _HabitScreenState();
}
class _HabitScreenState extends State<HabitScreen> {
final List<Habit> _habits = [
Habit('Drink water', [true, true, true, false, true, false, false]),
Habit('Read 10 pages', [true, false, true, true, false, false, false]),
Habit('Stretch', List.filled(7, false)),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Habits')),
body: const Center(
child: Text('Your habits go here'),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פרויקטים
1פרויקט: רשימת משימות
רשימת משימות: רשימת המטלותרשימת משימות: הוספת מטלה4פרויקט: מעקב הרגלים
מעקב הרגלים: ההרגלים שלךמעקב הרגלים: השבועתרגלו בעצמכם: קומפיילר Flutter אונליין