← Kembali ke Beranda
Flutter UI Demo
Kunjungi Project

Teknologi

Flutter Dart GetX Material 3 SharedPreferences

Flutter UI Demo

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.

Logo Adib

© 2026 Adib

GitHub