ဒီ 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 ထည့်ပြီးဆက်တိုးချဲ့နိုင်ပါတယ်။