Membuat aplikasi to do list menggunakan flutter


Januari 30, 2026

 


📝 Deskripsi Aplikasi Flutter

Aplikasi ini merupakan contoh tampilan antarmuka (User Interface) sederhana menggunakan Flutter yang dibuat untuk menampilkan struktur dasar sebuah aplikasi mobile. Aplikasi terdiri dari AppBar, Drawer (menu samping), Body berisi tiga item dalam bentuk Column, serta Floating Action Button sebagai tombol aksi utama.


Aplikasi ini dijalankan menggunakan framework Flutter dengan konsep Material Design, sehingga tampilannya terlihat modern, rapi, dan mudah dikembangkan lebih lanjut.


📌 Pengertian Aplikasi yang Dibuat

Aplikasi Flutter ini adalah aplikasi dashboard sederhana yang berfungsi sebagai contoh penerapan komponen UI dasar Flutter. Setiap komponen disusun menggunakan widget seperti Scaffold, AppBar, Column, dan Card untuk membentuk tampilan aplikasi yang terstruktur.


Aplikasi ini belum memiliki fungsi pengolahan data, namun berfokus pada tampilan dan struktur layout sebagai dasar pembuatan aplikasi mobile Android maupun iOS.


🎯 Tujuan Pembuatan Aplikasi

Tujuan dari pembuatan aplikasi Flutter ini adalah:


Memahami struktur dasar aplikasi Flutter

Membantu pemula mengenal kerangka utama aplikasi seperti AppBar, Body, Drawer, dan Floating Action Button.


Melatih penggunaan widget layout

Seperti Column, Row, dan Card untuk menyusun tampilan antarmuka secara vertikal dan horizontal.


Mengenal konsep Material Design

Agar aplikasi memiliki tampilan yang konsisten, responsif, dan user-friendly.


Sebagai bahan pembelajaran dan dokumentasi

Cocok digunakan untuk tugas sekolah, praktikum, atau artikel tutorial di Blogger.


Menjadi dasar pengembangan aplikasi lanjutan

Aplikasi ini dapat dikembangkan lebih lanjut dengan fitur navigasi, database, autentikasi, dan interaksi pengguna.


📌 Kesimpulan

Dengan dibuatnya aplikasi Flutter ini, pengguna dapat memahami dasar pembuatan UI aplikasi mobile menggunakan Flutter. Aplikasi ini sangat cocok sebagai contoh awal (starter project) sebelum masuk ke tahap pengembangan aplikasi yang lebih kompleks.

link: z410206b54103.zapp.page

Comments

Post a Comment

Popular posts from this blog

Membuat Carousel Gambar Film Marvel dengan Bottom Navigation

Image
  🚀 Belajar Flutter di Zapp.run: Membuat Carousel Gambar Film Marvel dengan Bottom Navigation Halo semuanya! 👋 Di artikel kali ini saya ingin berbagi pengalaman seru saya saat belajar Flutter menggunakan platform Zapp.run. Tujuan saya adalah membuat sebuah halaman galeri film Marvel yang memiliki fitur: Carousel slider gambar yang bisa digeser (swipe) ke kiri dan kanan Gambar bisa diklik untuk membuka halaman detail Bottom Navigation Bar untuk berpindah menu (Home, Favorite, Profile) Awalnya saya hanya ingin mencoba-coba, tapi ternyata hasilnya lumayan keren dan membuat saya semakin semangat belajar Flutter 💪 🧰 Persiapan Project Saya menggunakan situs Z app.run  untuk membuat project Flutter secara online. Zapp.run sangat membantu karena: Tidak perlu instalasi Android Studio Bisa langsung coding di browser Proses running dan debugging sangat cepat Setelah membuat project baru, saya menambahkan beberapa gambar poster film Marvel ke folder assets/, seperti: Spider-Man Homeco...
Read more

Kelompok Flutter

 Belajar Flutter: Membuat Halaman Data Kelompok Belajar Anggota Kelompok:  M.Rizky Firmansyah Desta Adila Kusuma Rianto Fitra Anzani Halo teman-teman! 👋 Beberapa waktu lalu saya sedang belajar Dart & Flutter dan mencoba membuat sebuah project sederhana. Tujuannya adalah menampilkan data kelompok belajar di dalam 1 halaman aplikasi. Project ini sangat cocok untuk pemula yang ingin berlatih layout, menampilkan data, dan membuat popup dialog di Flutter. Konsep Halaman yang Dibuat Struktur halaman yang saya rancang sebagai berikut: Bagian atas → Nama kelompok. Di bawahnya → Foto kelompok secara keseluruhan. Selanjutnya → Daftar anggota (berisi foto, nama, nomor absen, dan alamat). Di bagian bawah → Tombol yang bila ditekan akan memunculkan popup dialog berisi rincian anggota kelompok: Nama lengkap Nama kelompok Nomor absen Alamat rumah Kode Program Lengkap (main.dart) Berikut kode lengkap yang saya tulis di main.dart menggunakan zapp.run. Foto-foto anggota disimpan di folder ...
Read more

M.Rizky firmansyah design UI/UX

Image
  Perjalanan Belajarku di Dunia Pemrograman Mobile: Saatnya Fokus ke UI/UX! Halo semuanya! Di postingan kali ini, aku ingin sedikit berbagi tentang perjalanan belajarku dalam mempelajari pemrograman mobile . Setelah beberapa waktu bergelut dengan konsep dasar pemrograman, akhirnya aku sampai di tahap yang menurutku sangat seru dan menantang: UI/UX (User Interface dan User Experience) . Kenapa UI/UX Penting? Sebelumnya, aku sempat berpikir kalau yang paling penting dalam membuat aplikasi adalah logika program dan fitur-fitur canggihnya. Tapi ternyata, secanggih apa pun aplikasi yang kita buat, kalau tampilannya membingungkan atau sulit digunakan, pengguna pasti enggan memakainya. Nah, di sinilah pentingnya UI/UX. UI berfokus pada bagaimana tampilan aplikasi — warna, layout, icon, tombol, dll. Sedangkan UX lebih kepada bagaimana pengalaman pengguna saat menggunakan aplikasi tersebut — apakah mudah? nyaman? intuitif? Apa yang Sedang Aku Pelajari? Saat ini, aku sedang belajar ...
Read more