5minwithHafidz

 

---

🌐 Tutorial Flutter Web: Membuat Aplikasi Navigator Lokasi Sekolah dan Rumah

Halo teman-teman! 👋
Pada kesempatan kali ini, kita akan belajar bagaimana membuat aplikasi web berbasis Flutter yang bisa menampilkan peta lokasi sekolah dan rumah. Aplikasi ini akan sangat cocok untuk proyek sekolah, promosi institusi, maupun sebagai latihan membuat aplikasi web interaktif menggunakan Google Maps Embed.

---

🎯 Apa yang Akan Kita Buat?

Kita akan membangun aplikasi bernama "SMKN 1 Banjar Navigator", yang memiliki fitur:

✅ Tampilan awal (Welcome Page)
✅ Pilihan lokasi: Sekolah & Rumah
✅ Menampilkan peta interaktif langsung dari Google Maps
✅ Simpan lokasi favorit dengan localStorage
✅ Fitur berbagi via WhatsApp & membuka navigasi di Google Maps

---

🛠 Teknologi yang Digunakan

• Flutter Web

• Google Maps Embed API

• HTML IFrame

• Dart html dan ui package

• LocalStorage (khusus untuk Web)

---

📦 Struktur Kode

1. Main Entry Point

void main() {
  if (kIsWeb) {
    // Register view Google Maps
  }
  runApp(const MyApp());
}

📌 Di sini kita melakukan pengecekan platform menggunakan kIsWeb. Jika dijalankan di Web, maka kita registrasikan dua tampilan peta menggunakan ui.platformViewRegistry.

---

2. Registrasi IFrame Google Maps

ui.platformViewRegistry.registerViewFactory(
  'embedded-map-school',
  (int viewId) => _createIframe('https://www.google.com/maps/embed?...'),
);

Fungsi ini digunakan untuk membuat Google Maps Embed agar bisa ditampilkan di widget Flutter Web menggunakan HtmlElementView.

---

3. Welcome Page

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const MapSelectionPage(),
      ),
    );
  },
  child: const Text('Mulai'),
),

Halaman ini adalah landing page dengan tombol "Mulai" untuk masuk ke halaman pemilihan lokasi.

---

4. Map Selection Page

_buildLocationCard(
  context,
  'Sekolah',
  Icons.school,
  Colors.blue,
  'SMK Negeri 1 Banjar',
  'embedded-map-school',
),

Kita menampilkan dua pilihan lokasi: Sekolah dan Rumah, masing-masing terhubung ke iframe Google Maps yang berbeda.

---

5. Location Page (Peta Interaktif)

HtmlElementView(
  viewType: widget.mapViewType,
),

Di halaman ini, kita menampilkan iframe Google Maps yang sudah diregistrasikan sebelumnya. Selain itu:

• 📍 Bisa ditandai sebagai favorit

• 📤 Bisa dibagikan via WhatsApp

• 🧭 Bisa langsung membuka navigasi Google Maps

---

6. Menyimpan Favorit dengan LocalStorage

html.window.localStorage['location_favorite_SMK Negeri 1 Banjar'] = 'true';

Kita menggunakan localStorage untuk menyimpan lokasi yang ditandai sebagai favorit. Ini hanya berjalan di Flutter Web.

---

✨ Fitur Tambahan

• UI modern dengan tema Material 3 dan font Poppins

• Menggunakan Card dan ElevatedButton untuk tampilan interaktif

• Kompatibel dan responsif untuk semua ukuran layar

---

🎁 Bonus: Link Embed Google Maps

Jika kamu ingin mengganti lokasi peta, cukup ganti link di fungsi _createIframe. Kamu bisa dapatkan link tersebut dari Google Maps → Bagikan → Sematkan Peta.

---

🚀 Penutup

Aplikasi ini adalah contoh implementasi sederhana namun powerful dari integrasi peta dalam Flutter Web. Sangat cocok digunakan untuk:

• Presentasi sekolah

• Aplikasi pemandu lokasi

• Dashboard pelajar/guru

• Tugas akhir atau lomba IT

Semoga tutorial ini bermanfaat dan membantumu makin paham cara kerja Flutter Web dan integrasi iframe.

---

📌 Download & Coba Sendiri

Kamu bisa copy-paste seluruh kode dari artikel ini ke project Flutter Web milikmu. Pastikan kamu menjalankannya di browser (bukan emulator mobile), karena iframe dan localStorage hanya berjalan di web.

---

Butuh versi backend atau fitur tambahan seperti lokasi dinamis via GPS/Geolokasi? Silakan komentar di bawah, atau lanjutkan pengembangannya sesuai kebutuhanmu! 💪

---