Menu
CoddyTech
flag Ar iconالعربيةdown icon

متتبع العادات: عاداتك

جزء من قسم المشاريع في رحلة 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 عبر الإنترنت