to do list sederhana - dika saputra

 

Aplikasi To-Do List merupakan salah satu contoh aplikasi sederhana yang sangat efektif untuk mempelajari dasar-dasar pengembangan antarmuka pengguna menggunakan Flutter. Flutter sendiri adalah framework UI modern yang dikembangkan oleh Google dan memungkinkan pengembang membangun aplikasi lintas platform dengan satu basis kode. Aplikasi ini dirancang untuk membantu pengguna mencatat, mengelola, serta memantau tugas yang harus dikerjakan, sekaligus menampilkan statistik tugas secara real-time.

Aplikasi dimulai dari fungsi utama yang berperan sebagai titik awal eksekusi program. Pada bagian ini, Flutter menjalankan widget utama aplikasi yang bertugas menyiapkan keseluruhan struktur dan tampilan awal. Widget utama tersebut berfungsi sebagai kerangka dasar aplikasi dan bertanggung jawab dalam mengatur tema, judul aplikasi, serta menentukan halaman pertama yang akan ditampilkan kepada pengguna.

Pada tahap ini digunakan widget MaterialApp yang menjadi fondasi aplikasi berbasis Material Design. Widget ini mengatur berbagai aspek penting seperti tema warna utama, jenis font yang digunakan, serta menonaktifkan tampilan label debug agar aplikasi terlihat lebih profesional. Selain itu, MaterialApp juga menentukan halaman utama aplikasi, yaitu halaman To-Do List yang menjadi pusat interaksi pengguna.

Untuk mengelola data tugas, aplikasi menggunakan sebuah model data yang merepresentasikan satu item tugas. Model ini berisi informasi penting seperti identitas tugas, judul, deskripsi opsional, serta status penyelesaian. Dengan adanya model ini, pengelolaan data menjadi lebih terstruktur dan memisahkan logika data dari tampilan antarmuka pengguna, sehingga kode lebih mudah dipahami dan dikembangkan.

Halaman utama aplikasi dibangun menggunakan StatefulWidget karena isi halaman bersifat dinamis dan dapat berubah sewaktu-waktu. Perubahan tersebut mencakup penambahan tugas baru, pengeditan tugas yang sudah ada, penghapusan tugas, serta perubahan status tugas dari belum selesai menjadi selesai. StatefulWidget memungkinkan Flutter memperbarui tampilan secara otomatis setiap kali terjadi perubahan data.

Di dalam state halaman utama, aplikasi menyimpan daftar tugas dalam sebuah list. List ini menjadi sumber data utama yang akan ditampilkan pada layar. Selain itu, aplikasi juga menggunakan TextEditingController untuk menangani input teks dari pengguna saat menambahkan atau mengedit tugas. Controller ini memungkinkan aplikasi mengambil, mengubah, dan mengosongkan teks dengan mudah.

Aplikasi juga menyediakan fitur statistik yang menampilkan jumlah total tugas, jumlah tugas yang sudah selesai, dan jumlah tugas yang masih pending. Statistik ini dihitung secara otomatis berdasarkan isi daftar tugas dan akan selalu diperbarui setiap kali terjadi perubahan data. Dengan fitur ini, pengguna dapat langsung melihat progres pekerjaan mereka secara visual.

Tampilan utama aplikasi dibungkus menggunakan widget Scaffold yang berfungsi sebagai kerangka halaman. Scaffold menyediakan struktur dasar seperti AppBar dan body. AppBar digunakan untuk menampilkan judul aplikasi di bagian atas layar dengan tampilan yang bersih dan sederhana. Warna latar dibuat terang dengan bayangan tipis agar terlihat modern dan nyaman dipandang.

Bagian body aplikasi disusun secara vertikal menggunakan widget Column. Di dalamnya terdapat beberapa bagian utama yang tersusun rapi. Bagian pertama adalah tampilan statistik yang menampilkan jumlah tugas total, selesai, dan pending. Setiap statistik ditampilkan dengan ukuran teks besar dan warna berbeda untuk memudahkan pengguna membedakan informasinya.

Bagian selanjutnya adalah area untuk menambahkan tugas baru. Pada bagian ini ditampilkan sebuah kartu berwarna putih dengan sudut membulat dan bayangan lembut, memberikan kesan modern dan profesional. Di dalamnya terdapat tombol yang dapat ditekan untuk menampilkan dialog penambahan tugas. Dialog ini memungkinkan pengguna memasukkan judul tugas dan deskripsi tambahan jika diperlukan.

Setelah tugas ditambahkan, data tersebut akan langsung masuk ke dalam daftar tugas dan tampilan akan diperbarui secara otomatis. Proses ini terjadi karena aplikasi menggunakan mekanisme pembaruan state yang memastikan setiap perubahan data langsung tercermin pada antarmuka pengguna tanpa perlu memuat ulang aplikasi.

Bagian terakhir dari tampilan utama adalah daftar tugas. Daftar ini ditampilkan menggunakan ListView yang mampu menampilkan data dalam jumlah banyak secara efisien. Setiap item tugas ditampilkan dalam sebuah kartu dengan desain minimalis yang berisi indikator status, judul tugas, deskripsi, serta menu aksi.

Setiap tugas memiliki indikator berbentuk kotak yang dapat ditekan untuk menandai apakah tugas tersebut sudah selesai atau belum. Ketika tugas ditandai selesai, tampilan teks judul akan berubah menjadi tercoret dan warnanya menjadi lebih redup. Hal ini memberikan umpan balik visual yang jelas kepada pengguna mengenai status tugas tersebut.

Selain itu, setiap item tugas dilengkapi dengan menu tambahan yang memungkinkan pengguna untuk mengedit atau menghapus tugas. Fitur edit memungkinkan pengguna mengubah judul dan deskripsi tugas melalui dialog khusus, sedangkan fitur hapus dilengkapi dengan dialog konfirmasi untuk mencegah penghapusan secara tidak sengaja.

Seluruh interaksi yang mengubah data, seperti menambah, mengedit, menghapus, atau mengubah status tugas, dibungkus dalam mekanisme pembaruan state. Dengan cara ini, Flutter dapat membangun ulang tampilan secara efisien dan memastikan data serta antarmuka selalu sinkron.

Secara keseluruhan, aplikasi To-Do List ini merupakan contoh penerapan Flutter yang baik untuk aplikasi skala kecil hingga menengah. Aplikasi ini telah menggabungkan pengelolaan data, antarmuka pengguna yang rapi, serta interaksi dinamis dalam satu kesatuan yang mudah dipahami. Struktur kode yang jelas dan pemisahan antara data dan tampilan menjadikan aplikasi ini sangat cocok sebagai bahan pembelajaran maupun dasar untuk pengembangan aplikasi yang lebih kompleks di masa depan.