🧭 Cara Membuat Aplikasi Lokasi Interaktif SMK dengan Flutter Web

 

Halo para developer pemula maupun pecinta Flutter!

Pada artikel kali ini, kita akan membahas bagaimana cara membuat aplikasi lokasi sekolah interaktif berbasis web menggunakan Flutter. Studi kasus yang kita gunakan adalah SMK Negeri 1 Banjar.

Hasil akhirnya seperti ini:

📸 Tampilan Aplikasi:

🎯 Tujuan

Aplikasi ini dibuat agar:

• Pengguna dapat melihat lokasi sekolah via Google Maps.

• Ada tombol untuk melihat rute langsung di Google Maps.

• Bisa mengirim lokasi via WhatsApp.

• Menyimpan lokasi sebagai favorit menggunakan localStorage.

---

🔧 Tools & Library yang Digunakan

• Flutter Web

• HTML IFrame untuk embed peta

• dart:html untuk akses browser

• dart:ui untuk registrasi HtmlElementView

• Google Maps Embed API

• WhatsApp Deep Link

---

🧱 Struktur Dasar Kode

dart
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:ui' as ui;

void main() {
  if (kIsWeb) {
    ui.platformViewRegistry.registerViewFactory(
      'embedded-map',
      (int viewId) {
        final iframe = html.IFrameElement()
          ..src = 'https://www.google.com/maps/embed?...' // link Google Maps
          ..style.border = '0'
          ..style.width = '100%'
          ..style.height = '100%';
        iframe.setAttribute('loading', 'lazy');
        iframe.setAttribute('allowfullscreen', '');
        iframe.setAttribute('referrerpolicy', 'no-referrer-when-downgrade');
        return iframe;
      },
    );
  }

  runApp(const MyApp());
}

Penjelasan singkat:

• kIsWeb digunakan untuk memastikan kode hanya dijalankan di platform web.

• platformViewRegistry digunakan untuk menanamkan iframe map ke dalam Flutter widget tree.

---

🌐 Tautan Lokasi, Rute, dan WhatsApp

dart
static const double latitude = -7.370654872534863;
static const double longitude = 108.524395423573;

String get googleMapsDirectionsUrl =>
  'https://www.google.com/maps/dir/?api=1&destination=$latitude,$longitude';

String get googleMapsSearchUrl =>
  'https://www.google.com/maps/search/?api=1&query=$latitude,$longitude';

String get whatsappShareUrl {
  final text = Uri.encodeComponent(
    'Hai! Aku ingin ke SMK Negeri 1 Banjar. Cek lokasinya: $googleMapsSearchUrl');
  return 'https://wa.me/?text=$text';
}

---

📦 Tampilan Aplikasi

Tampilan menggunakan Flutter Material 3, dengan card-style UI, gradient background, dan tombol aksi:

• Tombol “Rute ke Sekolah” membuka rute langsung ke Google Maps.

• Tombol “WhatsApp” mengirim lokasi via pesan.

• Tombol bintang menandai sebagai favorit menggunakan localStorage.

dart
ElevatedButton.icon(
  onPressed: () => _openUrl(widget.directionsUrl),
  icon: const Icon(Icons.directions_car_filled),
  label: const Text('Rute ke Sekolah'),
),

Dan kode favorit menggunakan localStorage seperti ini:

dart
if (kIsWeb) {
  final stored = html.window.localStorage[favKey];
  isFavorite = stored == 'true';
}

---

✨ Hasil Akhir

Aplikasi dapat diakses langsung dari browser, mendukung UI modern, dan tidak memerlukan backend atau database.

---

🔚 Penutup

Aplikasi ini cocok untuk dipakai di:

• Website resmi sekolah

• Portal pendaftaran siswa baru

• Undangan kegiatan, open house, atau promosi

Dengan pendekatan Flutter Web + Google Maps Embed, kita bisa membuat aplikasi front-end peta yang interaktif, cepat, dan mudah digunakan oleh siapa saja.

Jika kamu ingin mencobanya atau mengembangkan aplikasi serupa, kamu bisa mulai dari project ini dan kustomisasi sesuai kebutuhan.