262 lines
7.9 KiB
Markdown
262 lines
7.9 KiB
Markdown
# 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.
|