متتبع العادات: عاداتك
جزء من قسم المشاريع في رحلة 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يأخذ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'),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس المشاريع
تدرّب بنفسك: مترجم Flutter عبر الإنترنت