📌 Membuat Aplikasi To-Do List Sederhana dengan Flutter
Halo teman-teman! 👋
Pada artikel kali ini, kita akan belajar membuat aplikasi To-Do List sederhana menggunakan Flutter dan bahasa Dart.
Kenapa To-Do List? Karena aplikasi ini sederhana, tetapi sangat bermanfaat untuk melatih kita memahami konsep dasar Flutter, seperti:
Cara membuat StatefulWidget
Menggunakan setState() untuk memperbarui UI
Menghubungkan data dengan tampilan aplikasi (UI)
🎯 Fitur Aplikasi
Aplikasi To-Do List yang kita buat memiliki 3 fitur utama:
Tambah tugas ➕ → user bisa menambahkan tugas baru ke daftar.
Centang tugas ✅ → user bisa menandai apakah tugas sudah selesai atau belum.
Hapus tugas ❌ → user bisa menghapus tugas dari daftar.
Dengan fitur sederhana ini, kita sudah bisa membuat aplikasi yang fungsional.
🛠️ Kode Program Lengkap
Berikut adalah kode lengkap untuk aplikasi To-Do List:
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(
title: 'To-Do List',
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: const ToDoListPage(),
);
}
}
class ToDoListPage extends StatefulWidget {
const ToDoListPage({super.key});
@override
State<ToDoListPage> createState() => _ToDoListPageState();
}
class _ToDoListPageState extends State<ToDoListPage> {
final List<Map<String, dynamic>> _tasks = [];
final TextEditingController _controller = TextEditingController();
// Tambah tugas
void _addTask() {
if (_controller.text.isNotEmpty) {
setState(() {
_tasks.add({"title": _controller.text, "done": false});
_controller.clear();
});
}
}
// Centang selesai
void _toggleDone(int index) {
setState(() {
_tasks[index]["done"] = !_tasks[index]["done"];
});
}
// Hapus tugas
void _deleteTask(int index) {
setState(() {
_tasks.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("To-Do List")),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: const InputDecoration(
hintText: "Tambahkan tugas...",
border: OutlineInputBorder(),
),
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: _addTask,
child: const Text("Tambah"),
),
],
),
),
Expanded(
child: ListView.builder(
itemCount: _tasks.length,
itemBuilder: (context, index) {
return ListTile(
leading: Checkbox(
value: _tasks[index]["done"],
onChanged: (_) => _toggleDone(index),
),
title: Text(
_tasks[index]["title"],
style: TextStyle(
decoration: _tasks[index]["done"]
? TextDecoration.lineThrough
: TextDecoration.none,
),
),
trailing: IconButton(
icon: const Icon(Icons.delete, color: Colors.red),
onPressed: () => _deleteTask(index),
),
);
},
),
),
],
),
);
}
}
📖 Penjelasan Kode
Mari kita bahas bagian penting dari kode di atas:
1. Fungsi main()
void main() { runApp(const ToDoApp()); }
👉 Ini adalah entry point aplikasi Flutter. Fungsi ini menjalankan widget utama ToDoApp.
2. ToDoApp (StatelessWidget)
class ToDoApp extends StatelessWidget { const ToDoApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'To-Do List', debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.blue), home: const ToDoListPage(), ); } }
👉 Widget ini adalah kerangka utama aplikasi. Kita menggunakan MaterialApp untuk mendesain aplikasi berbasis Material Design.
3. ToDoListPage (StatefulWidget)
class ToDoListPage extends StatefulWidget { const ToDoListPage({super.key}); @override State<ToDoListPage> createState() => _ToDoListPageState(); }
👉 Karena daftar tugas bisa berubah-ubah (dinamis), kita menggunakan StatefulWidget.
4. Variabel State
final List<Map<String, dynamic>> _tasks = []; final TextEditingController _controller = TextEditingController();
_tasks → menyimpan daftar tugas dalam bentuk list.
_controller → mengontrol input dari TextField.
5. Fitur Tambah, Centang, dan Hapus
Tambah tugas
void _addTask() { if (_controller.text.isNotEmpty) { setState(() { _tasks.add({"title": _controller.text, "done": false}); _controller.clear(); }); } }
Centang tugas
void _toggleDone(int index) { setState(() { _tasks[index]["done"] = !_tasks[index]["done"]; }); }
Hapus tugas
void _deleteTask(int index) { setState(() { _tasks.removeAt(index); }); }
6. Tampilan UI
•TextField → tempat user menulis tugas baru.
•ElevatedButton → tombol untuk menambah tugas.
•ListView.builder → menampilkan daftar tugas.
•Checkbox → menandai tugas sudah selesai.
•IconButton → menghapus tugas.
💡 Kesimpulan
Dengan membuat aplikasi To-Do List ini, kita belajar:
✅ Menggunakan StatefulWidget untuk membuat UI yang dinamis
✅ Memahami fungsi setState() agar tampilan selalu ter-update
✅ Menyimpan data sederhana dengan list
✅ Menghubungkan input user dengan daftar tugas
Aplikasi ini memang sederhana, tapi sangat penting untuk pemula. Selanjutnya, kamu bisa mengembangkan aplikasi ini dengan:
•Menyimpan data ke database lokal (SQLite/Hive)
•Menambahkan deadline atau prioritas tugas
•Menggunakan state management seperti Provider, Riverpod, atau GetX
Teman non jurusan:
Nama: APEY HN
JURUSAN: XI MPLB 1
.jpg)
