Flutter UI Demo adalah proyek portfolio yang berfokus pada UI, menampilkan toko furniture e-commerce yang dibangun sepenuhnya dengan Flutter. Tujuan utamanya adalah mendemonstrasikan teknik UI lanjutan, animasi kustom, dan manajemen state reaktif dengan GetX — tanpa integrasi backend.
Fitur Utama:
- Hero Banner: Banner promosi otomatis berputar (interval 3.5 detik) dengan latar gradasi, indikator dot animasi, dan CTA "Shop Now".
- 3D Featured Carousel: Carousel tumpukan kartu kustom dengan efek Z-stacking — kartu tengah berukuran penuh, kartu samping diperkecil dan di-offset horizontal. Mendukung gesture swipe dan tap-to-center.
- Animated Typing Search: Search bar yang berganti-ganti hint phrases dengan efek ketik kursor berkedip, jeda, dan animasi hapus.
- Category Filtering: Chip filter horizontal (All, Sofa, Chair, Table, Lamp) dengan status selection animasi.
- Product Detail Sheet: Bottom sheet lengkap dengan rating bintang animasi, penghitung harga animasi, color picker, quantity selector, dan add-to-cart dengan snackbar feedback.
- Sistem Favorit: Toggle favorit per produk, dipersist via SharedPreferences. Halaman favorit dengan animasi remove per item dan clear-all staggered fly-out.
- Halaman Profil: Info pengguna, kartu stats reaktif, settings toggles, dan banner cart reminder kondisional.
- Bottom Nav Kustom: Floating pill-shaped navigation bar dengan 3 tab dan indikator active animasi.
Tech Stack:
- Framework: Flutter 3.10+ (Dart)
- State Management: GetX (reactive observables, dependency injection)
- Local Storage: SharedPreferences (persistensi favorit)
- Theming: Material 3 dengan amber seed color
- Images: Network images dari picsum.photos dan pravatar.cc
Arsitektur:
Arsitektur single-controller GetX dengan semua state dikelola dalam satu AppController. UI dipecah menjadi screens (Home, Favorites, Profile) dan widget reusable. Tanpa backend, tanpa API call — semua data hardcoded untuk keperluan demonstrasi.