Thuta Learning
ရှာဖွေရန်
ProjectsMobile Developmentbeginner

Mini Project: Habit Tracker

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီ mini project မှာ simple Habit Tracker UI တစ်ခုတည်ဆောက်ပါမယ်။ User က habit name ထည့်ပြီး Add နှိပ်နိုင်မယ်၊ list ထဲမှာ habit တွေပြမယ်၊ tap လုပ်ရင် completed count တိုးမယ်။ ဒီ project က TextField, Button, List, setState, basic layout တွေကို တစ်နေရာတည်းမှာလေ့ကျင့်နိုင်ပါတယ်။

dart
class HabitTracker extends StatefulWidget {
  const HabitTracker({super.key});

  @override
  State<HabitTracker> createState() => _HabitTrackerState();
}

class _HabitTrackerState extends State<HabitTracker> {
  final controller = TextEditingController();
  final List<Map<String, dynamic>> habits = [];

  void addHabit() {
    final name = controller.text.trim();

    if (name.isEmpty) return;

    setState(() {
      habits.add({'name': name, 'done': 0});
      controller.clear();
    });
  }

  void completeHabit(int index) {
    setState(() {
      habits[index]['done']++;
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Habit Tracker')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: controller,
              decoration: const InputDecoration(
                labelText: 'New habit',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: addHabit,
              child: const Text('Add Habit'),
            ),
            const SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: habits.length,
                itemBuilder: (context, index) {
                  final habit = habits[index];

                  return Card(
                    child: ListTile(
                      title: Text(habit['name']),
                      subtitle: Text("Completed: ${habit['done']} times"),
                      trailing: const Icon(Icons.check_circle_outline),
                      onTap: () => completeHabit(index),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
You should see
Habit Tracker screen ပေါ်လာပြီး habit အသစ်ထည့်နိုင်ပါမယ်။ Habit card ကို tap လုပ်တိုင်း Completed count တိုးသွားပါမယ်။

နောက်တစ်ဆင့်

ဒီ project ကိုပိုကောင်းအောင် delete button, completed filter, local database, notification reminder, dark mode toggle ထည့်ပြီးဆက်တိုးချဲ့နိုင်ပါတယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • ListView ကို Column ထဲမှာ Expanded မပါဘဲထည့်ရင် height constraint error ဖြစ်နိုင်ပါတယ်။ Column ထဲက scrollable widget တွေမှာ Expanded/Flexible ကိုစဉ်းစားပါ။
Mini Project: Habit Tracker | Thuta Learning