Membuat aplikasi to-do-list di dartpad
import 'package:flutter/material.dart';
void main() {
runApp(const TodoApp());
}
class TodoApp extends StatelessWidget {
const TodoApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'To-Do List',
theme: ThemeData(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: const Color(0xffF5F7FA),
),
home: const TodoPage(),
);
}
}
class TodoPage extends StatefulWidget {
const TodoPage({super.key});
@override
State<TodoPage> createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
final List<Map<String, dynamic>> tasks = [];
final TextEditingController controller = TextEditingController();
void addTask() {
if (controller.text.trim().isEmpty) return;
setState(() {
tasks.add({
'title': controller.text.trim(),
'done': false,
});
});
controller.clear();
Navigator.pop(context);
}
void showAddTask() {
controller.clear();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Tambah Tugas'),
content: TextField(
controller: controller,
autofocus: true,
decoration: const InputDecoration(
hintText: 'Masukkan nama tugas',
border: OutlineInputBorder(),
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Batal'),
),
ElevatedButton(
onPressed: addTask,
child: const Text('Tambah'),
),
],
);
},
);
}
void deleteTask(int index) {
setState(() {
tasks.removeAt(index);
});
}
void toggleTask(int index, bool? value) {
setState(() {
tasks[index]['done'] = value ?? false;
});
}
@override
Widget build(BuildContext context) {
int completed = tasks.where((task) => task['done'] == true).length;
return Scaffold(
appBar: AppBar(
title: const Text(
'To-Do List',
style: TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: true,
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
body: Column(
children: [
Container(
width: double.infinity,
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Daftar Tugas Saya 📝',
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'$completed dari ${tasks.length} tugas selesai',
style: const TextStyle(
color: Colors.white70,
fontSize: 15,
),
),
],
),
),
Expanded(
child: tasks.isEmpty
? const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.task_alt,
size: 80,
color: Colors.grey,
),
SizedBox(height: 10),
Text(
'Belum ada tugas',
style: TextStyle(
fontSize: 18,
color: Colors.grey,
),
),
],
),
)
: ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: tasks.length,
itemBuilder: (context, index) {
final task = tasks[index];
return Card(
margin: const EdgeInsets.only(bottom: 10),
elevation: 2,
child: ListTile(
leading: Checkbox(
value: task['done'],
onChanged: (value) {
toggleTask(index, value);
},
),
title: Text(
task['title'],
style: TextStyle(
fontSize: 16,
decoration: task['done']
? TextDecoration.lineThrough
: TextDecoration.none,
color: task['done']
? Colors.grey
: Colors.black,
),
),
trailing: IconButton(
icon: const Icon(
Icons.delete,
color: Colors.red,
),
onPressed: () {
deleteTask(index);
},
),
),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: showAddTask,
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
child: const Icon(Icons.add),
),
);
}
}
📝 TO-DO LIST
Atur Tugasmu, Selesaikan Lebih Terarah!
📌 1. Apa Itu To-Do List?
To-Do List adalah daftar tugas atau kegiatan yang perlu dilakukan dalam waktu tertentu. Dengan To-Do List, kita bisa mencatat pekerjaan, menentukan prioritas, dan mengetahui tugas yang sudah selesai.
«💡 Sederhananya: To-Do List adalah catatan yang membantu kita agar tidak lupa dengan tugas yang harus dikerjakan.»
---
🎯 2. Tujuan To-Do List
To-Do List dibuat untuk membantu pengguna:
- 📋 Mencatat semua tugas.
- ⏰ Mengatur waktu pengerjaan.
- ⭐ Menentukan tugas yang paling penting.
- ✅ Memantau tugas yang sudah selesai.
- 🚀 Membuat pekerjaan lebih teratur.
---
✨ 3. Manfaat To-Do List
Menggunakan To-Do List dapat membuat aktivitas menjadi lebih terorganisir.
Beberapa manfaatnya:
🔹 Mengurangi risiko lupa tugas.
🔹 Membantu mengatur kegiatan sehari-hari.
🔹 Membuat pekerjaan lebih terarah.
🔹 Mempermudah melihat tugas yang belum selesai.
🔹 Membantu meningkatkan produktivitas.
---
⚙️ 4. Fitur Utama Aplikasi To-Do List
Fitur| Fungsi
➕ Tambah Tugas| Membuat tugas baru
📋 Daftar Tugas| Melihat semua tugas
✏️ Edit Tugas| Mengubah informasi tugas
🗑️ Hapus Tugas| Menghapus tugas
✅ Tandai Selesai| Menandai tugas yang sudah selesai
⭐ Prioritas| Menentukan tugas yang harus dikerjakan terlebih dahulu
---
🔄 5. Alur Kerja To-Do List
1️⃣ Buka aplikasi
⬇️
2️⃣ Tambahkan tugas
⬇️
3️⃣ Tugas masuk ke daftar
⬇️
4️⃣ Kerjakan tugas
⬇️
5️⃣ Tandai sebagai selesai ✅
⬇️
6️⃣ Tugas selesai 🎉
---
🎒 6. Contoh Penggunaan
Seorang siswa memiliki beberapa tugas:
- ☐ Mengerjakan tugas Bahasa Indonesia
- ☐ Membuat program RPL
- ☐ Belajar untuk ujian
- ☐ Membuat laporan tugas
- ☐ Mengumpulkan tugas
Setelah tugas selesai, siswa dapat memberikan tanda ✅ sehingga lebih mudah mengetahui tugas yang masih harus dikerjakan.
---
💻 7. Contoh Tampilan To-Do List
╔══════════════════════════╗
║ 📝 TO-DO LIST ║
╠══════════════════════════╣
║ ➕ Tambahkan tugas... ║
╠══════════════════════════╣
║ ☐ Membuat program RPL ║
║ ☐ Belajar ujian ║
║ ✅ Tugas Bahasa Inggris ║
║ ☐ Membuat laporan ║
╚══════════════════════════╝
🚀 8. Kesimpulan
To-Do List merupakan aplikasi sederhana yang sangat berguna untuk mengatur tugas dan kegiatan. Dengan mencatat tugas dan menandai pekerjaan yang telah selesai, pengguna dapat bekerja dengan lebih rapi, teratur, dan terarah.
🌟 “Catat tugasnya, kerjakan satu per satu, dan selesaikan dengan baik!”
Komentar
Posting Komentar