Tampilan
🛠️ Mini Proyek: Fondasi Flutter & Dart
⭐⭐⭐ · 4–6 jam
Apa yang akan kamu bangun
Katalog Buku Pribadi — aplikasi satu pengguna untuk mencatat buku yang kamu miliki dan sedang kamu baca. Setiap buku punya judul, penulis, genre, rating bintang, dan satu warna sampul yang kamu pilih sendiri. Tidak ada gambar sampul asli: cukup blok warna dengan judul di atasnya. Itu keputusan yang disengaja — kamu tidak perlu mencari satu pun berkas aset untuk menyelesaikan proyek ini.
Aplikasi ini dipilih karena ia menyentuh hampir seluruh Bagian I tanpa terasa dipaksakan. Daftar buku memaksamu memakai ListView.builder dan GridView (Bab 8) sekaligus, karena ada dua mode tampilan. Menambah buku butuh Form dengan validasi (Bab 6). Berpindah ke layar detail butuh Navigator yang mengirim data lewat konstruktor dan menerima hasil saat kembali (Bab 7) — dan karena setiap buku sudah punya warna serta judul, transisi Hero (Bab 11) menjadi hampir gratis. Warna sampul yang dipilih pengguna memaksamu memikirkan kontras, yang membawamu ke ColorScheme dan pasangan onX (Bab 9).
Yang paling menantang justru bagian yang tidak terlihat: memutuskan di mana state-nya tinggal. Daftar buku dipakai oleh layar daftar, layar detail, dan form tambah. Bagian I belum mengajarkan state management formal, jadi kamu harus menyelesaikannya dengan setState dan mengoper fungsi ke bawah (Bab 5). Rasa kikuk yang kamu alami di sini adalah persiapan terbaik untuk Bagian III — jangan hindari, rasakan saja.
Prasyarat
Selesaikan dulu:
- Bab 2 — Dart Esensial
- Bab 3 — Widget & Widget Tree
- Bab 4 — Layout
- Bab 5 — State & StatefulWidget
- Bab 6 — Input Pengguna & Form
- Bab 7 — Navigasi & Multi-Screen
- Bab 8 — List, Grid & Data Berulang
- Bab 9 — Theming, Styling & Aset
- Bab 10 — Responsive & Adaptive UI
- Bab 11 — Animasi
Requirement fungsional
- Layar utama menampilkan seluruh buku, dengan tombol untuk berganti antara tampilan daftar dan tampilan grid. Pilihan tampilan bertahan selama aplikasi berjalan.
- Tombol tambah membuka layar form berisi judul, penulis, genre (pilihan tetap), rating 1–5, dan pemilih warna sampul dari palet terbatas.
- Form menolak simpan kalau judul atau penulis kosong, dan menampilkan pesan kesalahan berbahasa Indonesia di bawah kolom yang bermasalah.
- Mengetuk sebuah buku membuka layar detail berisi seluruh informasinya, dengan transisi Hero pada blok sampul.
- Layar detail punya tombol hapus yang meminta konfirmasi lewat dialog sebelum benar-benar menghapus.
- Buku bisa ditandai favorit. Ikon favorit beranimasi saat ditekan — membesar lalu kembali, atau efek denyut serupa.
- Ada penyaring genre di layar utama. Memilih genre menyembunyikan buku lain tanpa menghapusnya dari data.
- Saat belum ada buku sama sekali, layar utama menampilkan keadaan kosong yang ramah — bukan layar putih.
- Aplikasi punya tema warna yang jelas miliknya sendiri, dan mode gelap yang tetap terbaca.
- Di layar selebar tablet, grid menampilkan lebih banyak kolom secara otomatis, dan layar detail tidak melebar sampai teksnya sulit dibaca.
Requirement teknis
- State dikelola dengan
setStatedan fungsi yang dioper ke bawah lewat konstruktor. Jangan pakai Riverpod, Provider, atau BLoC — itu bukan materi Bagian I, dan tujuan proyek ini justru merasakan batasnya. - Daftar dibangun dengan
ListView.builderdanGridView.builder, bukanColumndi dalamSingleChildScrollView. - Buku direpresentasikan sebagai kelas model dengan properti
finaldan metodecopyWith. Genre memakaienum, bukanString. - Daftar yang tersaring dihitung lewat getter, bukan disimpan sebagai variabel kedua yang harus kamu sinkronkan manual.
- Setiap
TextEditingControllerdanAnimationControllerdi-dispose(). - Warna diambil dari
Theme.of(context), bukan konstantaColors.*yang ditulis langsung di dalam widget. - Kode terpecah ke berkas terpisah:
models/,screens/, danwidgets/.main.darttidak boleh lebih dari sekitar seratus baris.
Checklist penerimaan
- Aplikasi berjalan tanpa error merah maupun peringatan overflow di konsol, baik dalam mode potret maupun lanskap.
- Menambah, mengubah tampilan, memfavoritkan, menyaring, dan menghapus semua bekerja tanpa perlu memuat ulang aplikasi.
flutter analyzetidak melaporkan satu pun masalah.- Mode gelap dinyalakan dari pengaturan perangkat dan seluruh teks tetap terbaca — tidak ada teks gelap di atas latar gelap.
- Kamu bisa menjelaskan, tanpa membuka kode, di widget mana daftar buku disimpan dan kenapa harus di sana.
Tantangan ekstra (opsional)
- Tambahkan geser untuk menghapus dengan
Dismissibledi tampilan daftar, lengkap dengan snackbar "Urungkan" yang benar-benar mengembalikan bukunya ke posisi semula. - Tambahkan pengurutan: berdasarkan judul, penulis, atau rating. Perhatikan bahwa
sort()mengubah list aslinya. - Ganti daftar biasa menjadi
AnimatedListsehingga buku baru menyelinap masuk dan buku yang dihapus menyelinap keluar.
Terjebak?
Baca ulang Bab 5 dan Bab 7 dulu — hampir semua kebuntuan di proyek ini berakar di satu pertanyaan yang sama: siapa yang memiliki datanya, dan bagaimana layar lain memberi tahu pemiliknya bahwa ada yang berubah. Kalau kamu macet berjam-jam di satu titik spesifik, itu wajar. Proyek ini memang dirancang untuk memaksamu mengingat kembali konsep yang sudah dibahas, bukan menghafalnya.