367 lines
8.4 KiB
Markdown
367 lines
8.4 KiB
Markdown
# 🚀 Quick Setup Guide - Card Wisata Beranda
|
|
|
|
## ✅ Status Implementasi
|
|
|
|
Tampilan card wisata beranda **sudah selesai dan siap digunakan**. Berikut adalah panduan cepat untuk setup dan testing.
|
|
|
|
---
|
|
|
|
## 📋 Checklist Implementasi
|
|
|
|
- ✅ Model data dengan 8 destinasi
|
|
- ✅ Card widget modern dengan desain elegan
|
|
- ✅ Home page dengan search & filter
|
|
- ✅ Grid layout 2 kolom responsive
|
|
- ✅ Animasi smooth tap
|
|
- ✅ Rating & category badges
|
|
- ✅ Detail page integration
|
|
- ✅ Warna tema sesuai spesifikasi
|
|
- ✅ Null safety enabled
|
|
|
|
---
|
|
|
|
## 🎨 File-File Baru/Updated
|
|
|
|
### 1. **Widget Card Baru**
|
|
```
|
|
lib/widgets/destination_card_modern.dart (NEW)
|
|
```
|
|
- Card design modern dengan rounded corner 16pt
|
|
- Gradient overlay di gambar
|
|
- Rating badge (sudut kanan atas)
|
|
- Category badge (sudut kiri atas)
|
|
- Animasi scale 0.95 saat tap
|
|
- Responsive layout
|
|
|
|
### 2. **Home Page Updated**
|
|
```
|
|
lib/pages/home_page.dart (UPDATED)
|
|
```
|
|
- SearchBar dengan placeholder "Cari wisata favoritmu..."
|
|
- Filter kategori: Semua, Gunung, Danau, Pantai
|
|
- Grid 2 kolom dengan spacing optimal
|
|
- Result counter
|
|
- Empty state handling
|
|
- Real-time filtering
|
|
|
|
### 3. **Home Page Alternative**
|
|
```
|
|
lib/pages/home_page_new.dart (NEW)
|
|
```
|
|
- Versi alternatif dengan styling sama
|
|
|
|
---
|
|
|
|
## 🏃 Quick Start
|
|
|
|
### Step 1: Update pub dependencies
|
|
```bash
|
|
cd android/wisata_app
|
|
flutter pub get
|
|
```
|
|
|
|
### Step 2: Run aplikasi
|
|
```bash
|
|
flutter run
|
|
```
|
|
|
|
### Step 3: Test fitur
|
|
1. **Buka halaman Beranda** → Lihat 8 card wisata
|
|
2. **Search** → Cari "Semeru" atau "Pantai"
|
|
3. **Filter** → Tap filter "Gunung", "Danau", "Pantai"
|
|
4. **Tap Card** → Buka detail halaman
|
|
5. **Scroll** → Lihat animasi smooth
|
|
|
|
---
|
|
|
|
## 📱 Tampilan yang Diharapkan
|
|
|
|
### Header (SliverAppBar)
|
|
```
|
|
┌─────────────────────────┐
|
|
│ Jelajahi Lumajang │ ← Title 32pt bold
|
|
│ Temukan 8 destinasi... │ ← Subtitle 14pt
|
|
│ [Gradient background] │
|
|
└─────────────────────────┘
|
|
```
|
|
|
|
### Search Bar
|
|
```
|
|
┌─────────────────────────┐
|
|
│ 🔍 Cari wisata favori.. │ ← Rounded 14pt
|
|
└─────────────────────────┘
|
|
```
|
|
|
|
### Filter Buttons
|
|
```
|
|
[Semua] [Gunung] [Danau] [Pantai]
|
|
```
|
|
|
|
### Card Grid (2 kolom)
|
|
```
|
|
┌─────────────┬─────────────┐
|
|
│ Card 1 │ Card 2 │
|
|
├─────────────┼─────────────┤
|
|
│ Card 3 │ Card 4 │
|
|
├─────────────┼─────────────┤
|
|
│ Card 5 │ Card 6 │
|
|
├─────────────┼─────────────┤
|
|
│ Card 7 │ Card 8 │
|
|
└─────────────┴─────────────┘
|
|
```
|
|
|
|
### Card Detail
|
|
```
|
|
┌─────────────────────────────┐
|
|
│ [Image with gradient] ⭐4.8 │ ← Rating badge
|
|
│ 🏔️ [Category] │ ← Category badge
|
|
├─────────────────────────────┤
|
|
│ Gunung Semeru │ ← Nama wisata
|
|
│ Gunung tertinggi di Jawa... │ ← Deskripsi
|
|
│ 📍 Ranu Pani, Lumajang │ ← Lokasi
|
|
└─────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🔍 Fitur Testing
|
|
|
|
### Test Scenario 1: Display All Cards
|
|
```
|
|
1. Buka app → Beranda tab
|
|
2. Expected: 8 card wisata ditampilkan
|
|
3. Verify: Grid 2 kolom, spacing konsisten
|
|
```
|
|
|
|
### Test Scenario 2: Search Functionality
|
|
```
|
|
1. Tap search bar
|
|
2. Type: "Semeru"
|
|
3. Expected: Hanya card "Gunung Semeru" ditampilkan
|
|
4. Tap X clear button
|
|
5. Expected: Kembali ke 8 card
|
|
```
|
|
|
|
### Test Scenario 3: Filter Kategori
|
|
```
|
|
1. Tap filter "Gunung"
|
|
2. Expected: 3 card ditampilkan (Lemongan, Semeru, B29)
|
|
3. Tap filter "Danau"
|
|
4. Expected: 3 card ditampilkan (Kumbolo, Pani, Regulo)
|
|
5. Tap filter "Pantai"
|
|
6. Expected: 2 card ditampilkan (Watu Godeg, Watu Pecak)
|
|
```
|
|
|
|
### Test Scenario 4: Card Tap Animation
|
|
```
|
|
1. Tap pada card
|
|
2. Expected: Card shrink 5% dengan smooth animation
|
|
3. Expected: Navigasi ke detail page
|
|
```
|
|
|
|
### Test Scenario 5: Detail Page
|
|
```
|
|
1. Tap card dari beranda
|
|
2. Expected: Detail page membuka
|
|
3. Verify: Hero image, rating, kategori, lokasi
|
|
4. Verify: Deskripsi lengkap
|
|
5. Verify: Model path ditampilkan
|
|
6. Tap "Lihat Model 3D" button
|
|
7. Expected: Navigasi ke AR viewer
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Warna Tema Reference
|
|
|
|
### Hijau Alam (Primary)
|
|
- Light: #2FA86B
|
|
- Main: #1F8F5F
|
|
- Dark: #0D6A45
|
|
|
|
### Coklat Earthy (Mountain)
|
|
- #8B6F47
|
|
|
|
### Biru Danau (Lake)
|
|
- #4A90E2
|
|
|
|
### Orange (Beach)
|
|
- #E28D42
|
|
|
|
### Neutral
|
|
- Background: #F7F4EA
|
|
- Surface: #FFFFFF
|
|
- Text: #2C3E50
|
|
|
|
---
|
|
|
|
## 📊 Data Structure
|
|
|
|
### Destination Model
|
|
```dart
|
|
class Destination {
|
|
final int id;
|
|
final String nama;
|
|
final String deskripsi;
|
|
final String lokasi;
|
|
final double rating;
|
|
final String kategori; // 'gunung', 'danau', 'pantai'
|
|
final String gambar; // assets/images/...
|
|
final String modelPath; // assets/models/...glb
|
|
final String deskripsiLengkap;
|
|
}
|
|
```
|
|
|
|
### Sample Data
|
|
```dart
|
|
destinationList = [
|
|
Destination(
|
|
id: 1,
|
|
nama: 'Gunung Lemongan',
|
|
deskripsi: 'Gunung yang indah dengan pemandangan alam...',
|
|
lokasi: 'Pronojiwo, Lumajang',
|
|
rating: 4.8,
|
|
kategori: 'gunung',
|
|
gambar: 'assets/images/gunung_lemongan.jpg',
|
|
modelPath: 'assets/models/gunung_lemongan.glb',
|
|
deskripsiLengkap: '...',
|
|
),
|
|
// ... 7 destinasi lainnya
|
|
];
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 Troubleshooting
|
|
|
|
### Issue: Card hanya menampilkan 5 wisata
|
|
**Solution**: Refresh/rebuild app
|
|
```bash
|
|
flutter clean
|
|
flutter pub get
|
|
flutter run
|
|
```
|
|
|
|
### Issue: Gambar tidak muncul di card
|
|
**Solusi**: Pastikan file gambar ada di `assets/images/`
|
|
```yaml
|
|
# Cek pubspec.yaml
|
|
flutter:
|
|
assets:
|
|
- assets/images/
|
|
- assets/models/
|
|
```
|
|
|
|
### Issue: Animasi card terasa lag
|
|
**Solusi**: Pastikan device memiliki cukup memory
|
|
- Clear device cache: `flutter clean`
|
|
- Rebuild: `flutter run --release`
|
|
|
|
### Issue: Filter tidak bekerja
|
|
**Solusi**: Pastikan kategori spelling benar (lowercase)
|
|
```dart
|
|
kategori: 'gunung' // ✅ Benar
|
|
kategori: 'Gunung' // ❌ Salah
|
|
```
|
|
|
|
---
|
|
|
|
## 📚 Import Statements
|
|
|
|
Pastikan import ini ada di home_page.dart:
|
|
```dart
|
|
import 'package:flutter/material.dart';
|
|
import '../models/destination_model.dart';
|
|
import '../models/destination_data.dart';
|
|
import '../widgets/destination_card_modern.dart';
|
|
import 'destination_detail_page.dart';
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Navigation Flow
|
|
|
|
```
|
|
BerandaScreen
|
|
└── HomePage
|
|
└── SearchBar + Filter
|
|
└── SliverGrid (8 cards)
|
|
└── onTap → DestinationDetailPage
|
|
├── Hero Image
|
|
├── Rating & Category
|
|
├── Full Description
|
|
└── "Lihat Model 3D" → AR Viewer
|
|
```
|
|
|
|
---
|
|
|
|
## ✨ Highlights Fitur
|
|
|
|
### Desain Modern
|
|
- ✨ Rounded corner 16pt
|
|
- ✨ Subtle shadow (elevation 4)
|
|
- ✨ Gradient overlay cerdas
|
|
- ✨ Consistent spacing & typography
|
|
|
|
### Interaksi Smooth
|
|
- 🎬 Scale animation 0.95 saat tap
|
|
- 🎬 Color transition 200ms
|
|
- 🎬 Responsive feedback
|
|
|
|
### User Experience
|
|
- 🎯 Clear visual hierarchy
|
|
- 🎯 Intuitive filtering
|
|
- 🎯 Real-time search
|
|
- 🎯 Informative badges
|
|
|
|
---
|
|
|
|
## 📱 Responsive Behavior
|
|
|
|
### Portrait Mode (Mobile)
|
|
- Grid: 2 kolom
|
|
- Card height: Optimal untuk thumb
|
|
- Spacing: 14pt cross, 18pt main
|
|
|
|
### Landscape Mode
|
|
- Dapat disesuaikan ke 3-4 kolom
|
|
- Margin bottom untuk navigation bar
|
|
|
|
### Tablet
|
|
- Dapat ditingkatkan ke 3+ kolom
|
|
- Larger card dengan lebih banyak info
|
|
|
|
---
|
|
|
|
## 🚀 Deployment Checklist
|
|
|
|
Sebelum publish ke Play Store:
|
|
|
|
- [ ] Test semua 8 destinasi load dengan benar
|
|
- [ ] Test search dengan berbagai query
|
|
- [ ] Test filter semua kategori
|
|
- [ ] Test detail page loading
|
|
- [ ] Test AR model loading
|
|
- [ ] Test on minimal Android SDK version
|
|
- [ ] Test on various device sizes
|
|
- [ ] Verify text bahasa Indonesia lengkap
|
|
- [ ] Check color contrast accessibility
|
|
- [ ] Remove debug prints
|
|
|
|
---
|
|
|
|
## 📞 Support
|
|
|
|
Jika ada issue atau pertanyaan:
|
|
1. Check DOKUMENTASI_CARD_WISATA.md untuk detail lengkap
|
|
2. Review code di `lib/widgets/destination_card_modern.dart`
|
|
3. Check `lib/pages/home_page.dart` untuk logic
|
|
4. Verify data di `lib/models/destination_data.dart`
|
|
|
|
---
|
|
|
|
**Status**: ✅ Production Ready
|
|
**Last Updated**: 2026-05-16
|
|
**Version**: 1.0
|
|
**Tested**: Android Mobile Portrait
|