Menu
CoddyTech

מעקב הרגלים: ההרגלים שלך

חלק מהיחידה פרויקטים במסלול ה-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 פיקסלים) לכפתור שיצוף שם בהמשך.

challenge icon

אתגר

קל

הציגו את ההרגלים:

  • כתבו רכיב HabitCard שמקבל required habit ומציג את שמו בסגנון 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'),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

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

כל השיעורים ביחידה פרויקטים

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