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
```dart
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
```bash
python generate_placeholders.py
```
Script ini akan generate 8 placeholder images di `assets/images/`

### 2. Jalankan Aplikasi
```bash
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`:
```dart
const seed = Color(0xFF1F8F5F); // Ubah color code
```

### Menambah Wisata Baru
Edit di `lib/models/destination_data.dart`:
```dart
Destination(
  id: 9,
  nama: 'Wisata Baru',
  deskripsi: '...',
  // ... properties lainnya
)
```

### Mengubah Layout Grid
Edit di `lib/pages/home_page.dart`:
```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.