393 lines
9.3 KiB
Markdown
393 lines
9.3 KiB
Markdown
# 📱 Dokumentasi Tampilan Card Wisata Beranda
|
||
|
||
## Ringkasan Fitur Beranda
|
||
|
||
Tampilan beranda telah diperbarui dengan desain modern, elegan, dan responsif yang menampilkan **8 destinasi wisata Lumajang** dalam format card grid yang menarik.
|
||
|
||
---
|
||
|
||
## 🎨 Desain Card Wisata
|
||
|
||
### Karakteristik Card:
|
||
- ✅ **Rounded Corner Modern**: Border radius 16pt untuk tampilan elegan
|
||
- ✅ **Shadow Halus**: Elevation 4 dengan drop shadow subtle
|
||
- ✅ **Gambar Landscape Fullscreen**: Mengisi area atas card (60% dari tinggi)
|
||
- ✅ **Gradient Overlay**: Gradient hitam transparan di atas gambar untuk readability
|
||
- ✅ **Animasi Tap**: Scale animation 0.95 saat disentuh (smooth & responsive)
|
||
- ✅ **Rating Badge**: Di sudut kanan atas dengan icon bintang
|
||
- ✅ **Category Badge**: Di sudut kiri atas dengan warna sesuai kategori
|
||
- ✅ **Responsive**: Grid 2 kolom dengan childAspectRatio 0.75
|
||
|
||
### Warna Tema Card:
|
||
```
|
||
Kategori Gunung: #8B6F47 (Coklat Earthy)
|
||
Kategori Danau: #4A90E2 (Biru Danau)
|
||
Kategori Pantai: #E28D42 (Orange Accent)
|
||
Background Card: #FFFFFF (Putih Clean)
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Data 8 Destinasi Wisata
|
||
|
||
### 1. Gunung Lemongan
|
||
- **Lokasi**: Pronojiwo, Lumajang
|
||
- **Rating**: 4.8/5
|
||
- **Kategori**: Gunung
|
||
- **Model 3D**: `assets/models/gunung_lemongan.glb`
|
||
- **Gambar**: `assets/images/gunung_lemongan.jpg`
|
||
|
||
### 2. Gunung Semeru
|
||
- **Lokasi**: Ranu Pani, Lumajang
|
||
- **Rating**: 4.9/5
|
||
- **Kategori**: Gunung
|
||
- **Model 3D**: `assets/models/gunung_semeru.glb`
|
||
- **Gambar**: `assets/images/gunung_semeru.jpg`
|
||
|
||
### 3. Pantai Watu Godeg
|
||
- **Lokasi**: Wuluhan, Lumajang
|
||
- **Rating**: 4.6/5
|
||
- **Kategori**: Pantai
|
||
- **Model 3D**: `assets/models/pantai_watu_godeg.glb`
|
||
- **Gambar**: `assets/images/pantai_watu_godeg.jpg`
|
||
|
||
### 4. Pantai Watu Pecak
|
||
- **Lokasi**: Sumbersari, Lumajang
|
||
- **Rating**: 4.5/5
|
||
- **Kategori**: Pantai
|
||
- **Model 3D**: `assets/models/pantai_watu_pecak.glb`
|
||
- **Gambar**: `assets/images/pantai_watu_pecak.jpg`
|
||
|
||
### 5. Puncak B29
|
||
- **Lokasi**: Pronojiwo, Lumajang
|
||
- **Rating**: 4.7/5
|
||
- **Kategori**: Gunung
|
||
- **Model 3D**: `assets/models/puncak_b29.glb`
|
||
- **Gambar**: `assets/images/puncak_b29.jpg`
|
||
|
||
### 6. Ranu Kumbolo
|
||
- **Lokasi**: Ranu Pani, Lumajang
|
||
- **Rating**: 4.8/5
|
||
- **Kategori**: Danau
|
||
- **Model 3D**: `assets/models/ranu_kumbolo.glb`
|
||
- **Gambar**: `assets/images/ranu_kumbolo.jpg`
|
||
|
||
### 7. Ranu Pani
|
||
- **Lokasi**: Lumajang
|
||
- **Rating**: 4.7/5
|
||
- **Kategori**: Danau
|
||
- **Model 3D**: `assets/models/ranu_pani.glb`
|
||
- **Gambar**: `assets/images/ranu_pani.jpg`
|
||
|
||
### 8. Ranu Regulo
|
||
- **Lokasi**: Lumajang
|
||
- **Rating**: 4.6/5
|
||
- **Kategori**: Danau
|
||
- **Model 3D**: `assets/models/ranu_regulo.glb`
|
||
- **Gambar**: `assets/images/ranu_regulo.jpg`
|
||
|
||
---
|
||
|
||
## 🔍 Fitur Search Bar
|
||
|
||
### Placeholder Text:
|
||
```
|
||
"Cari wisata favoritmu..."
|
||
```
|
||
|
||
### Fitur Search:
|
||
- 🔎 **Real-time Search**: Mencari nama dan deskripsi wisata
|
||
- ❌ **Clear Button**: Tombol X untuk membersihkan pencarian
|
||
- 🎨 **Styling Modern**:
|
||
- Border radius 14pt
|
||
- Shadow subtle
|
||
- Focus border hijau alam (#1F8F5F)
|
||
- Content padding balanced
|
||
|
||
---
|
||
|
||
## 🏷️ Filter Kategori
|
||
|
||
### Tombol Filter:
|
||
1. **Semua** (Default)
|
||
- Warna: Abu-abu (#CCCCCC)
|
||
- Tampilkan: Semua 8 wisata
|
||
|
||
2. **Gunung**
|
||
- Warna: Coklat Earthy (#8B6F47)
|
||
- Tampilkan: 3 wisata (Lemongan, Semeru, B29)
|
||
|
||
3. **Danau**
|
||
- Warna: Biru Danau (#4A90E2)
|
||
- Tampilkan: 3 wisata (Kumbolo, Pani, Regulo)
|
||
|
||
4. **Pantai**
|
||
- Warna: Orange (#E28D42)
|
||
- Tampilkan: 2 wisata (Watu Godeg, Watu Pecak)
|
||
|
||
### Interaksi Filter:
|
||
- ✅ Toggle on/off dengan tap
|
||
- ✅ Animated color change (200ms)
|
||
- ✅ Shadow effect saat selected
|
||
- ✅ Real-time grid update
|
||
|
||
---
|
||
|
||
## 🎯 Interaksi Card
|
||
|
||
### Saat Card Ditekan:
|
||
1. **Scale Animation**: Ukuran card berkurang 5% (smooth feedback)
|
||
2. **Navigation**: Membuka halaman `DestinationDetailPage`
|
||
3. **Data Terkirim**:
|
||
```dart
|
||
destination {
|
||
id: int
|
||
nama: String
|
||
deskripsi: String
|
||
lokasi: String
|
||
rating: double
|
||
kategori: String (gunung|danau|pantai)
|
||
gambar: String (path asset)
|
||
modelPath: String (path .glb file)
|
||
deskripsiLengkap: String
|
||
}
|
||
```
|
||
|
||
### Detail Page Features:
|
||
- 📷 Hero image dengan gradient overlay
|
||
- ⭐ Rating display
|
||
- 📍 Lokasi detail
|
||
- 📝 Deskripsi lengkap
|
||
- 🎯 Informasi wisata
|
||
- 🏳️ Model 3D viewer button
|
||
- 🔗 Tombol "Bagikan"
|
||
|
||
---
|
||
|
||
## 📐 Layout Architecture
|
||
|
||
### Home Page Structure:
|
||
```
|
||
SliverAppBar (Expandable Header)
|
||
├── Title: "Jelajahi Lumajang"
|
||
├── Subtitle: "Temukan 8 destinasi wisata..."
|
||
├── Gradient Background
|
||
└── Height: 140pt
|
||
|
||
SliverToBoxAdapter (Search & Filter)
|
||
├── Search TextField
|
||
├── Category Filter Buttons
|
||
└── Results Counter
|
||
|
||
SliverGrid (Destinasi Cards)
|
||
├── CrossAxisCount: 2 kolom
|
||
├── ChildAspectRatio: 0.75
|
||
├── CrossAxisSpacing: 14pt
|
||
├── MainAxisSpacing: 18pt
|
||
└── DestinationCardModern × 8
|
||
|
||
SliverPadding (Bottom spacing)
|
||
└── 40pt padding
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Palet Warna Lengkap
|
||
|
||
```
|
||
Primary (Hijau Alam): #1F8F5F
|
||
Primary Dark: #2FA86B
|
||
Secondary (Hijau Muda): #B7D05A
|
||
Tertiary (Orange): #E28D42
|
||
Background (Krem): #F7F4EA
|
||
Surface (Putih): #FFFFFF
|
||
|
||
Category Colors:
|
||
- Gunung: #8B6F47 (Coklat Earthy)
|
||
- Danau: #4A90E2 (Biru Danau)
|
||
- Pantai: #E28D42 (Orange)
|
||
|
||
Text Colors:
|
||
- Primary Text: #2C3E50 (Gelap)
|
||
- Secondary Text: #537561 (Gelap hijau)
|
||
- Hint/Placeholder: #999999 (Abu-abu)
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 Responsiveness
|
||
|
||
### Breakpoints:
|
||
- **Mobile Portrait** (< 600dp): 2 kolom grid ✅
|
||
- **Mobile Landscape** (600-900dp): 2-3 kolom
|
||
- **Tablet** (> 900dp): Dapat dikembangkan ke 3-4 kolom
|
||
|
||
### Safe Area:
|
||
- Padding horizontal: 20pt di semua section
|
||
- Padding vertical: Adaptive sesuai content
|
||
- Bottom safe area: Respects system navigation
|
||
|
||
---
|
||
|
||
## 🔄 State Management
|
||
|
||
### Filtering Logic:
|
||
```dart
|
||
_filterDestinations() {
|
||
List filtered = destinationList.where((dest) {
|
||
// Match search query
|
||
final matchesSearch =
|
||
dest.nama.toLowerCase().contains(query) ||
|
||
dest.deskripsi.toLowerCase().contains(query);
|
||
|
||
// Match category filter
|
||
final matchesCategory =
|
||
selectedCategory.isEmpty ||
|
||
dest.kategori == selectedCategory;
|
||
|
||
return matchesSearch && matchesCategory;
|
||
}).toList();
|
||
}
|
||
```
|
||
|
||
### TextEditingController:
|
||
- Listener untuk real-time filtering
|
||
- Clear functionality via suffixIcon
|
||
- State update saat perubahan
|
||
|
||
---
|
||
|
||
## 📁 File Struktur
|
||
|
||
```
|
||
lib/
|
||
├── models/
|
||
│ ├── destination_model.dart (Model class)
|
||
│ ├── destination_data.dart (Data list - 8 wisata)
|
||
│ └── destination.dart (Legacy)
|
||
│
|
||
├── pages/
|
||
│ ├── home_page.dart (Home beranda - UPDATED)
|
||
│ ├── home_page_new.dart (Alternate version)
|
||
│ └── destination_detail_page.dart (Detail page)
|
||
│
|
||
└── widgets/
|
||
├── destination_card_modern.dart (NEW - Card widget modern)
|
||
├── destination_card_widget.dart (Legacy)
|
||
└── ...
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Cara Menggunakan
|
||
|
||
### 1. Import di HomePage:
|
||
```dart
|
||
import '../widgets/destination_card_modern.dart';
|
||
import '../models/destination_data.dart';
|
||
```
|
||
|
||
### 2. Tampilkan Grid:
|
||
```dart
|
||
SliverGrid(
|
||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||
crossAxisCount: 2,
|
||
crossAxisSpacing: 14,
|
||
mainAxisSpacing: 18,
|
||
childAspectRatio: 0.75,
|
||
),
|
||
delegate: SliverChildBuilderDelegate(
|
||
(context, index) {
|
||
return DestinationCardModern(
|
||
destination: _filteredDestinations[index],
|
||
onTap: () => navigateToDetail(),
|
||
);
|
||
},
|
||
childCount: _filteredDestinations.length,
|
||
),
|
||
)
|
||
```
|
||
|
||
### 3. Testing:
|
||
```bash
|
||
cd android/wisata_app
|
||
flutter pub get
|
||
flutter run
|
||
```
|
||
|
||
---
|
||
|
||
## ✨ Fitur Bonus
|
||
|
||
### Empty State:
|
||
- Icon dengan circular background
|
||
- Message "Wisata tidak ditemukan"
|
||
- Hint: "Coba ubah pencarian atau filter kategori"
|
||
|
||
### Result Counter:
|
||
- Menampilkan jumlah wisata ditemukan
|
||
- Update real-time saat filter berubah
|
||
- Styling: Pill-shaped dengan background hijau transparan
|
||
|
||
### Error Handling:
|
||
- Image fallback dengan gradient placeholder
|
||
- Icon landscape saat gambar gagal load
|
||
- Graceful degradation
|
||
|
||
---
|
||
|
||
## 📝 Changelog
|
||
|
||
### Version 1.0 (Current)
|
||
- ✅ Card design dengan desain modern elegan
|
||
- ✅ 8 destinasi wisata lengkap
|
||
- ✅ Search functionality real-time
|
||
- ✅ Filter kategori 3 jenis
|
||
- ✅ Animasi smooth tap
|
||
- ✅ Responsive grid layout
|
||
- ✅ Rating & category badges
|
||
- ✅ Detail page integration
|
||
- ✅ Null safety compliant
|
||
|
||
---
|
||
|
||
## 🎓 Best Practices Implemented
|
||
|
||
1. **Clean Architecture**
|
||
- Separation of concerns
|
||
- Reusable widget components
|
||
- Model-driven data flow
|
||
|
||
2. **Performance**
|
||
- SliverGrid untuk scrolling efficiency
|
||
- Image optimization
|
||
- Minimal rebuilds dengan state management
|
||
|
||
3. **UX/UI**
|
||
- Consistent spacing (Material 3 guidelines)
|
||
- Clear visual hierarchy
|
||
- Intuitive interactions
|
||
|
||
4. **Code Quality**
|
||
- Null safety enabled
|
||
- Proper documentation
|
||
- Meaningful variable names
|
||
|
||
---
|
||
|
||
## 🐛 Known Issues & Future Improvements
|
||
|
||
### Potential Enhancements:
|
||
1. Add favorites/wishlist feature
|
||
2. Implement infinite scroll pagination
|
||
3. Add sorting options (rating, alphabetical)
|
||
4. Implement bookmark functionality
|
||
5. Add offline caching
|
||
|
||
---
|
||
|
||
**Dokumentasi ini berlaku untuk Flutter wisata app berbasis AR dengan Lumajang sebagai destinasi utama.**
|
||
|
||
*Last Updated: 2026-05-16*
|
||
*Status: Production Ready* ✅
|