8.4 KiB

Raw Permalink Blame History

🚀 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

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

cd android/wisata_app
flutter pub get

Step 2: Run aplikasi

flutter run

Step 3: Test fitur

Buka halaman Beranda → Lihat 8 card wisata
Search → Cari "Semeru" atau "Pantai"
Filter → Tap filter "Gunung", "Danau", "Pantai"
Tap Card → Buka detail halaman
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

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

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

flutter clean
flutter pub get
flutter run

Issue: Gambar tidak muncul di card

Solusi: Pastikan file gambar ada di assets/images/

# 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)

kategori: 'gunung'  // ✅ Benar
kategori: 'Gunung'  // ❌ Salah

📚 Import Statements

Pastikan import ini ada di home_page.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';

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:

Check DOKUMENTASI_CARD_WISATA.md untuk detail lengkap
Review code di lib/widgets/destination_card_modern.dart
Check lib/pages/home_page.dart untuk logic
Verify data di lib/models/destination_data.dart

Status: ✅ Production Ready
Last Updated: 2026-05-16
Version: 1.0
Tested: Android Mobile Portrait

8.4 KiB Raw Permalink Blame History