מעקב הרגלים: השבוע
חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 29 מתוך 36.
מתחת לכל שם מופיע השבוע: שבעה עיגולים קטנים, מיום שני עד יום ראשון, שממולאים בימים שבהם ביצעת את ההרגל. כל עיגול הוא רכיב קטן בפני עצמו, DayCircle, עם תווית וציון אם הוא הושלם.
עיגול הוא Container בגודל קבוע ועם BoxDecoration שהמאפיין shape שלו הוא BoxShape.circle. הצבע שלו מגיע מהערכת העיצוב, כך שהוא תואם לירוק של האפליקציה, ובהמשך הוא ישתנה מעצמו במצב כהה:
final colors = Theme.of(context).colorScheme;
...
color: done ? colors.primary : colors.surfaceContainerHighest,לטקסט על רקע צבעוני יש צבע תואם בערכת הצבעים: onPrimary על primary, ו-onSurfaceVariant על האפור. התאימו ביניהם, והטקסט תמיד יהיה קריא.
שבעת העיגולים הם Row עם MainAxisAlignment.spaceBetween, כך שהם מתפרסים על פני הכרטיס. בנו אותם באמצעות for שסופר: dayNames[i] הוא התווית, ו-habit.days[i] מציין אם ההרגל הושלם.
אתגר
בינוניהציגו את השבוע:
- כתבו רכיב
DayCircleעםrequired, עםlabelועםdone: עיגול בגודל 40 על 40, בצבעprimaryכשהוא מסומן כהושלם ובצבעsurfaceContainerHighestכשלא, כשהתווית ממורכזת בגופן מודגש בגודל 11, בצבעonPrimaryאוonSurfaceVariant - בתוך
HabitCard, מתחת לשם ולאחר רווח של 12 פיקסלים, הוסיפוRowשמפזר שבעה רכיביDayCircleבאמצעותspaceBetween
נסו בעצמכם
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: ListView(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 88),
children: [
for (Habit habit in _habits) HabitCard(habit: habit),
],
),
);
}
}
class HabitCard extends StatelessWidget {
const HabitCard({super.key, required this.habit});
final Habit habit;
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return Card(
margin: const EdgeInsets.only(top: 12),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(habit.name, style: textTheme.titleMedium),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פרויקטים
תרגלו בעצמכם: קומפיילר Flutter אונליין