9.3 KiB

Raw Permalink Blame History

📱 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:

Semua (Default)
- Warna: Abu-abu (#CCCCCC)
- Tampilkan: Semua 8 wisata
Gunung
- Warna: Coklat Earthy (#8B6F47)
- Tampilkan: 3 wisata (Lemongan, Semeru, B29)
Danau
- Warna: Biru Danau (#4A90E2)
- Tampilkan: 3 wisata (Kumbolo, Pani, Regulo)
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:

Scale Animation: Ukuran card berkurang 5% (smooth feedback)
Navigation: Membuka halaman DestinationDetailPage

Data Terkirim:

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:

_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:

import '../widgets/destination_card_modern.dart';
import '../models/destination_data.dart';

2. Tampilkan Grid:

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:

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

Clean Architecture
- Separation of concerns
- Reusable widget components
- Model-driven data flow
Performance
- SliverGrid untuk scrolling efficiency
- Image optimization
- Minimal rebuilds dengan state management
UX/UI
- Consistent spacing (Material 3 guidelines)
- Clear visual hierarchy
- Intuitive interactions
Code Quality
- Null safety enabled
- Proper documentation
- Meaningful variable names

🐛 Known Issues & Future Improvements

Potential Enhancements:

Add favorites/wishlist feature
Implement infinite scroll pagination
Add sorting options (rating, alphabetical)
Implement bookmark functionality
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 ✅

9.3 KiB Raw Permalink Blame History Unescape Escape