MIF_E31231623/ASSET_IMAGES_MODELS_CHECKLI...

6.5 KiB

🖼️ Asset Images & Models Checklist

Struktur Asset yang Diperlukan

Pastikan file-file berikut sudah ada di folder yang sesuai:

assets/
├── images/
│   ├── gunung_lemongan.jpg
│   ├── gunung_semeru.jpg
│   ├── pantai_watu_godeg.jpg
│   ├── pantai_watu_pecak.jpg
│   ├── puncak_b29.jpg
│   ├── ranu_kumbolo.jpg
│   ├── ranu_pani.jpg
│   └── ranu_regulo.jpg
│
└── models/
    ├── gunung_lemongan.glb
    ├── gunung_semeru.glb
    ├── pantai_watu_godeg.glb
    ├── pantai_watu_pecak.glb
    ├── puncak_b29.glb
    ├── ranu_kumbolo.glb
    ├── ranu_pani.glb
    └── ranu_regulo.glb

📸 Spesifikasi Gambar

Rekomendasi Format Gambar

  • Format: JPEG atau PNG
  • Ukuran: 1920x1080px (landscape)
  • Aspect Ratio: 16:9 atau 4:3
  • Kompresi: Optimized (< 500KB per file)
  • Color Space: sRGB

Daftar Gambar yang Dibutuhkan

No Nama File Destinasi Ukuran Disarankan
1 gunung_lemongan.jpg Gunung Lemongan 1920x1080
2 gunung_semeru.jpg Gunung Semeru 1920x1080
3 pantai_watu_godeg.jpg Pantai Watu Godeg 1920x1080
4 pantai_watu_pecak.jpg Pantai Watu Pecak 1920x1080
5 puncak_b29.jpg Puncak B29 1920x1080
6 ranu_kumbolo.jpg Ranu Kumbolo 1920x1080
7 ranu_pani.jpg Ranu Pani 1920x1080
8 ranu_regulo.jpg Ranu Regulo 1920x1080

🎬 Model 3D (.glb files)

Format GLB (GLTF Binary)

  • Format: .glb (binary GLTF)
  • Ukuran: Optimal < 10MB per file
  • Kompresi: Gunakan Draco compression
  • Polygon Count: Optimal < 100k triangles

Daftar Model yang Dibutuhkan

No Nama File Destinasi Status
1 gunung_lemongan.glb Gunung Lemongan Perlu dibuat
2 gunung_semeru.glb Gunung Semeru Perlu dibuat
3 pantai_watu_godeg.glb Pantai Watu Godeg Perlu dibuat
4 pantai_watu_pecak.glb Pantai Watu Pecak Perlu dibuat
5 puncak_b29.glb Puncak B29 Perlu dibuat
6 ranu_kumbolo.glb Ranu Kumbolo Perlu dibuat
7 ranu_pani.glb Ranu Pani Perlu dibuat
8 ranu_regulo.glb Ranu Regulo Perlu dibuat

🛠️ Tools untuk Membuat Asset

Untuk Gambar:

  • Photoshop / GIMP: Edit dan compress
  • TinyPNG: Kompresi gambar online
  • ImageOptim: Batch optimization
  • Krita: Design landscape images

Untuk Model 3D:

  • Blender: Model dan convert ke GLB
  • Maya: Professional 3D modeling
  • SketchUp: Modeling landscape/arsitektur
  • Sketchfab: Download model 3D siap pakai

📝 Pubspec.yaml Configuration

Pastikan pubspec.yaml sudah konfigurasi assets:

flutter:
  assets:
    - assets/
    - assets/images/
    - assets/models/
    - assets/images/gunung_lemongan.jpg
    - assets/images/gunung_semeru.jpg
    - assets/images/pantai_watu_godeg.jpg
    - assets/images/pantai_watu_pecak.jpg
    - assets/images/puncak_b29.jpg
    - assets/images/ranu_kumbolo.jpg
    - assets/images/ranu_pani.jpg
    - assets/images/ranu_regulo.jpg
    - assets/models/gunung_lemongan.glb
    - assets/models/gunung_semeru.glb
    - assets/models/pantai_watu_godeg.glb
    - assets/models/pantai_watu_pecak.glb
    - assets/models/puncak_b29.glb
    - assets/models/ranu_kumbolo.glb
    - assets/models/ranu_pani.glb
    - assets/models/ranu_regulo.glb

Checklist Setup Assets

Sebelum Run Aplikasi:

  • Folder assets/images/ ada dan kosong/berisi placeholder
  • Folder assets/models/ ada dan kosong/berisi placeholder
  • Minimal 1 gambar test di assets/images/
  • pubspec.yaml sudah update dengan asset paths
  • Run flutter pub get setelah update pubspec
  • No flutter warnings tentang missing assets

Saat Testing Awal:

  • Test dengan placeholder images (gradient)
  • Verify card fallback image bekerja
  • Verify error handling saat image tidak ada
  • Verify model path ditampilkan di detail

Sebelum Production:

  • Semua 8 gambar sudah ada dan optimized
  • Semua 8 model GLB sudah ada
  • Image resolution konsisten
  • File size total < 50MB
  • No missing asset warnings
  • Test di device fisik minimal 2 ukuran layar

📊 Image Optimization Tips

Untuk Landscape Photos:

  1. Crop ke 16:9 aspect ratio
  2. Resize ke 1920x1080
  3. Compress dengan JPEG quality 80-85
  4. Final size target: 200-300KB

Batch Processing:

# Menggunakan ImageMagick
mogrify -resize 1920x1080 -quality 85 *.jpg

Online Compression:


🎯 Model 3D Conversion

Dari Blender ke GLB:

  1. Open model di Blender
  2. File → Export As → glTF Binary (.glb)
  3. Settings:
    • Format: glTF Binary
    • Include: All data
    • Draco: Enable compression
  4. Save di assets/models/

File Size Target:

  • Gunung model: 5-8MB
  • Lake model: 3-5MB
  • Beach model: 4-6MB

🔄 Placeholder Strategy

Jika asset belum ready, gunakan placeholder:

Gambar Placeholder:

Container(
  color: Color(0xFF1F8F5F),
  child: Icon(
    Icons.landscape,
    color: Colors.white,
    size: 100,
  ),
)

Model Placeholder:

Text('Model: assets/models/gunung_semeru.glb')

📱 Testing dengan Placeholder

Sebelum asset final, test dengan:

  1. Gradient Background sebagai gambar
  2. Icon landscape sebagai fallback
  3. Text string untuk model path
  4. Fixed data tanpa image loading

🚀 Deployment Checklist

  • Semua asset di-optimize
  • File size total acceptable
  • Load time < 2 detik
  • No memory leaks
  • Image caching working
  • Model loading smooth
  • Error states handled
  • Device storage sufficient

💡 Pro Tips

  1. Gunakan CDN atau cloud storage untuk model besar
  2. Implement lazy loading untuk images
  3. Cache gambar locally setelah first load
  4. Monitor bundle size di APK/AAB
  5. Test pada slow network (3G/4G)

Image Compression:

3D Model Creation:

GLB Validation:


Status: 📋 Checklist Ready
Last Updated: 2026-05-16