MIF_E31231623/DOKUMENTASI_HALAMAN_BERANDA.md

Dokumentasi: Tampilan Card Wisata - Halaman Beranda

📱 Gambaran Umum

Telah diimplementasikan tampilan Halaman Beranda yang modern, elegan, dan responsif untuk aplikasi Flutter promosi wisata Kabupaten Lumajang berbasis AR. Halaman ini menampilkan 8 card wisata dengan desain modern yang mengikuti tema wisata alam Indonesia.

🎨 Desain & Tema

Palet Warna

• Hijau Alam (Primary): #1F8F5F - Warna utama aplikasi
• Hijau Cerah: #2FA86B - Gradient dan highlight
• Coklat Earthy: #8B7355 - Kategori Gunung
• Biru Danau: #2196F3 - Kategori Danau
• Teal Pantai: #4ECDC4 - Kategori Pantai
• Orange Aksen: #E28D42 - Rating badge
• Putih Clean: #FFFFFF - Background
• Beige Lembut: #F7F4EA - Scaffold background

Tipografi

• Font Family: Roboto
• Heading: Bold, 28px
• Title Card: Bold, 16px
• Body Text: Regular, 12-14px
• Label: Bold, 11-13px

📁 Struktur File

lib/
├── models/
│   ├── destination_model.dart       # Model data untuk wisata
│   └── destination_data.dart        # List 8 wisata dengan data lengkap
├── pages/
│   ├── home_page.dart               # Halaman beranda dengan grid
│   └── destination_detail_page.dart # Halaman detail wisata
├── widgets/
│   ├── destination_card_widget.dart # Widget card reusable
│   └── placeholder_image_widget.dart # Widget untuk placeholder
├── screens/
│   └── beranda_screen.dart          # Screen wrapper dengan bottom nav
└── services/
    └── auth_service.dart            # Service autentikasi (sudah ada)

🎯 Fitur Utama

1. Grid Card Wisata (2 Kolom)

• ✅ Menampilkan 8 card wisata dalam grid 2 kolom
• ✅ Responsive untuk semua ukuran layar Android mobile
• ✅ Child aspect ratio 0.75 untuk proporsi ideal
• ✅ Spacing 16px horizontal, 20px vertical

2. Design Card Wisata

Setiap card memiliki:

Bagian Atas (2/3 dari card)

• 📸 Gambar Landscape Fullscreen dengan gradient overlay
• 🏷️ Badge Kategori (Gunung/Danau/Pantai) - Top Left
• ⭐ Badge Rating dengan icon star - Top Right
• 🎨 Gradient Overlay untuk readability teks

Bagian Bawah (1/3 dari card)

• 📝 Nama Wisata - Bold, 1 baris
• 📄 Deskripsi Singkat - 2 baris maksimal
• 📍 Lokasi dengan Icon - 1 baris
• 🔘 Tombol "Lihat Detail" - Green, Bold

3. Animasi & Interaksi

• 👆 Tap Animation: Scale 1.0 → 0.98 saat di-tap
• ⏱️ Duration: 300ms dengan Curves.easeInOut
• 🌊 Smooth Transitions: Semua animasi halus
• 💫 Shadow Effects: Elevation 8 untuk depth

4. Search Bar

• 🔍 Placeholder: "Cari wisata favoritmu..."
• 📌 Real-time filtering saat user mengetik
• ❌ Tombol clear untuk menghapus pencarian
• 🎨 Styling: Rounded 16px, shadow, icon search

5. Filter Kategori

• 🏷️ Tombol Filter: "Semua", "Gunung", "Danau", "Pantai"
• 🎨 Visual Feedback:
  • Selected: Warna cerah, shadow
  • Unselected: Grey, no shadow
• 🔄 Toggle Behavior: Click untuk select/deselect
• 📊 Live Count: "Ditemukan X wisata"

6. Empty State

• 🔍 Icon: search_off
• 📝 Text: "Wisata tidak ditemukan"
• 💡 Suggestion: "Coba ubah pencarian atau filter kategori"
• 🎨 Styling: Centered, grey colors

🏔️ 8 Wisata yang Ditampilkan

No	Nama	Kategori	Model Path	Rating
1	Gunung Lemongan	Gunung	assets/models/gunung_lemongan.glb	4.8
2	Gunung Semeru	Gunung	assets/models/gunung_semeru.glb	4.9
3	Pantai Watu Godeg	Pantai	assets/models/pantai_watu_godeg.glb	4.6
4	Pantai Watu Pecak	Pantai	assets/models/pantai_watu_pecak.glb	4.5
5	Puncak B29	Gunung	assets/models/puncak_b29.glb	4.7
6	Ranu Kumbolo	Danau	assets/models/ranu_kumbolo.glb	4.8
7	Ranu Pani	Danau	assets/models/ranu_pani.glb	4.7
8	Ranu Regulo	Danau	assets/models/ranu_regulo.glb	4.6

📄 Detail Halaman (Destination Detail Page)

Saat user menekan card, aplikasi membuka halaman detail dengan:

Informasi Lengkap

• ✅ Gambar besar dengan gradient overlay
• ✅ Nama wisata & kategori badge
• ✅ Rating dengan rating badge
• ✅ Lokasi dengan icon
• ✅ Deskripsi lengkap
• ✅ Informasi wisata (kategori, lokasi, rating)
• ✅ Path model 3D

Action Buttons

• 💌 Tombol Bagikan: Untuk share wisata
• 🔍 Tombol Lihat AR: Untuk membuka model 3D

Scroll Behavior

• 📌 Collapsing App Bar dengan hero image
• 🎨 Smooth gradient overlay
• 🔙 Back button custom dengan styling

💾 Data Model

Destination Model

class Destination {
  final int id;
  final String nama;
  final String deskripsi;           // Deskripsi singkat
  final String lokasi;
  final double rating;              // 0.0 - 5.0
  final String kategori;            // 'gunung', 'danau', 'pantai'
  final String gambar;              // Path ke file image
  final String modelPath;           // Path ke file .glb
  final String deskripsiLengkap;   // Deskripsi panjang
}

🔧 Implementasi Teknis

Clean Architecture

• ✅ Separation of concerns (Models, Pages, Widgets, Services)
• ✅ Reusable widget components
• ✅ State management dengan StatefulWidget
• ✅ Provider ready untuk implementasi lebih lanjut

Null Safety

• ✅ Semua kode menggunakan null safety
• ✅ Proper type annotations
• ✅ Error handling yang baik

Responsive Design

• ✅ CustomScrollView dengan Slivers
• ✅ GridView yang responsive
• ✅ Padding dan spacing yang adaptif
• ✅ Dynamic text sizing berdasarkan screen size

Performance

• ✅ Efficient widget tree
• ✅ Proper state management
• ✅ Asset optimization (image error handling)
• ✅ Memory-conscious animations

🚀 Cara Menggunakan

1. Generate Placeholder Images

python generate_placeholders.py

Script ini akan generate 8 placeholder images di assets/images/

2. Jalankan Aplikasi

flutter pub get
flutter run

3. Testing di Emulator/Device

• Navigasi ke halaman beranda setelah login
• Test search functionality
• Test filter kategori
• Tap card untuk membuka detail halaman
• Test scroll dan animasi

🎓 Bahasa & Lokalisasi

Semua text menggunakan Bahasa Indonesia:

• "Jelajahi Lumajang" - Header
• "Temukan keindahan wisata alam" - Subtitle
• "Cari wisata favoritmu..." - Search placeholder
• "Filter Kategori" - Section header
• "Lihat Detail" - Button label
• "Tentang Tempat Ini" - Section header
• "Lihat AR" - AR button
• Dan lainnya...

📱 Responsive Breakpoints

• Mobile (320px - 600px): 1 kolom atau 2 kolom kecil
• Tablet (600px - 900px): 2 kolom
• Large (900px+): 2-3 kolom

⚙️ Customization

Mengubah Warna Primary

Edit di main.dart:

const seed = Color(0xFF1F8F5F); // Ubah color code

Menambah Wisata Baru

Edit di lib/models/destination_data.dart:

Destination(
  id: 9,
  nama: 'Wisata Baru',
  deskripsi: '...',
  // ... properties lainnya
)

Mengubah Layout Grid

Edit di lib/pages/home_page.dart:

const SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3, // Ubah jumlah kolom
  // ...
)

🐛 Troubleshooting

Images tidak muncul

✅ Pastikan file di folder assets/images/ dengan nama yang benar ✅ Run flutter pub get setelah menambah assets ✅ Cek console untuk error messages

Filter tidak bekerja

✅ Pastikan kategori di destination_data.dart sesuai dengan filter button ✅ Kategori harus: 'gunung', 'danau', 'pantai' (lowercase)

Animation lag

✅ Run di release mode: flutter run --release ✅ Kurangi jumlah animasi atau complexity

📚 Referensi

• Flutter Documentation: https://flutter.dev
• Material Design 3: https://m3.material.io/
• Dart Language: https://dart.dev

🎉 Selesai!

Tampilan card wisata halaman Beranda sudah siap digunakan dan dapat dikembangkan lebih lanjut sesuai kebutuhan aplikasi wisata AR Kabupaten Lumajang.