🚀 Projek Flutter Keren: Tampilkan Lokasi SMKN 1 Banjar dengan Google Maps Web! ~ WAHANA BELAJAR DAN BERBAGI

🚀 Projek Flutter Keren: Tampilkan Lokasi SMKN 1 Banjar dengan Google Maps Web!

Halo, teman-teman pejuang RPL! 🌟

Kalian pernah nggak sih, bingung bikin aplikasi Flutter yang bisa nampilin Google Maps langsung di dalam tampilan web? Atau, kalian pengin bikin aplikasi keren yang bisa kasih rute ke sekolah dan kontak langsung via WhatsApp buat calon siswa atau orang tua?

Tenang, kita bakal belajar bareng dari projek nyata yang menampilkan lokasi SMKN 1 Banjar pakai Flutter Web + Google Maps! 😍 Cocok banget buat kalian kelas 12 RPL yang mau naik level 🔥 dan juga buat pembaca umum yang tertarik di dunia coding Flutter.

💡 Apa yang Akan Kita Pelajari?

Menampilkan Google Maps Embed di Flutter Web
Membuka link rute Google Maps
Menambahkan tombol untuk kontak WhatsApp
Menggunakan HtmlElementView untuk tampilan berbasis HTML di Flutter Web
Memahami konsep platformViewRegistry

🧠 Konsep Dasarnya Dulu Yuk

Di Flutter Web, kalau kita mau nampilin iframe (seperti Google Maps Embed), kita nggak bisa pakai widget standar kayak Container atau WebView. Kita perlu pakai sesuatu yang bisa rendering HTML langsung — yaitu HtmlElementView.

Tapi sebelum itu, kita harus daftarin dulu HTML element-nya dengan ui.platformViewRegistry.registerViewFactory.

🔧 Full Source Code-nya (Flutter Web Only)

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SMKN 1 Banjar',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        scaffoldBackgroundColor: Colors.grey[50],
        textTheme: const TextTheme(
          bodyMedium: TextStyle(fontSize: 16),
        ),
      ),
      home: const HomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    const String viewID = 'google-maps-iframe';
    const String mapEmbedUrl =
        'https://maps.google.com/maps?q=-7.370330346793185,108.52705617634716&z=15&output=embed';

    // Daftarkan iframe Google Maps
    ui.platformViewRegistry.registerViewFactory(viewID, (int viewId) {
      return html.IFrameElement()
        ..src = mapEmbedUrl
        ..style.border = 'none';
    });

    return Scaffold(
      appBar: AppBar(
        title: const Text('SMKN 1 Banjar'),
        actions: [
          TextButton(
            onPressed: () {},
            child: const Text('Beranda', style: TextStyle(color: Colors.white)),
          ),
          TextButton(
            onPressed: () {},
            child: const Text('Profil', style: TextStyle(color: Colors.white)),
          ),
          TextButton(
            onPressed: () {},
            child: const Text('Jurusan', style: TextStyle(color: Colors.white)),
          ),
          TextButton(
            onPressed: () {},
            child: const Text('Kontak', style: TextStyle(color: Colors.white)),
          ),
        ],
      ),
      body: Stack(
        children: [
          Center(
            child: Container(
              constraints: const BoxConstraints(maxWidth: 800),
              padding: const EdgeInsets.all(24.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text(
                    'SMK Negeri 1 Banjar',
                    style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10),
                  const Text(
                    'Sekolah Menengah Kejuruan unggulan di Kota Banjar dengan berbagai jurusan seperti RPL, Pemasaran, DKV, dan lainnya.',
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 24),

                  // Google Maps Embed
                  const SizedBox(
                    width: 700,
                    height: 400,
                    child: HtmlElementView(viewType: viewID),
                  ),

                  const SizedBox(height: 24),

                  ElevatedButton.icon(
                    onPressed: () {
                      html.window.open(
                        'https://www.google.com/maps/dir/?api=1&destination=-7.370330346793185,108.52705617634716',
                        '_blank',
                      );
                    },
                    icon: const Icon(Icons.directions),
                    label: const Text('Rute ke Sekolah'),
                  ),
                  const SizedBox(height: 12),

                  ElevatedButton.icon(
                    onPressed: () {
                      html.window.open(
                        'https://wa.me/6281234567890?text=Halo%20SMKN%201%20Banjar%2C%20saya%20ingin%20bertanya%20mengenai%20PPDB.',
                        '_blank',
                      );
                    },
                    icon: const Icon(Icons.message), // Ganti dari Icons.whatsapp yang error
                    label: const Text('Hubungi via WhatsApp'),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.green,
                      foregroundColor: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ),

          // 🔽 Floating WhatsApp Button
          Positioned(
            bottom: 20,
            right: 20,
            child: GestureDetector(
              onTap: () {
                html.window.open(
                  'https://wa.me/6281234567890?text=Halo%20SMKN%201%20Banjar%2C%20saya%20ingin%20bertanya%20mengenai%20PPDB.',
                  '_blank',
                );
              },
              child: Container(
                width: 60,
                height: 60,
                decoration: const BoxDecoration(
                  color: Color(0xFF25D366),
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 5,
                      offset: Offset(2, 2),
                    ),
                  ],
                ),
                child: Center(
                  child: Image.network(
                    'https://cdn-icons-png.flaticon.com/512/733/733585.png',
                    width: 32,
                    height: 32,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

🌐 Preview Fitur Aplikasi

✅ Menampilkan Google Maps lokasi SMKN 1 Banjar
✅ Menyediakan tombol untuk langsung buka rute ke sekolah
✅ Ada tombol WhatsApp yang siap bantu komunikasi calon siswa
✅ Tampilan rapi dan responsif di web

Jika penasaran ingin coba hasil kodingan ini : https://zc6u06mbc6v0.zapp.page/#/

🎓 Pembelajaran untuk Siswa Kelas 12 RPL

Kodingan ini bukan hanya sekadar menampilkan peta. Ini adalah simbol kemampuan kalian menghubungkan dunia nyata dengan teknologi.

Bayangin kalau kamu nanti membuat aplikasi untuk sekolah lain, hotel, toko, bahkan layanan darurat — konsep seperti ini pasti bakal berguna.

🔥 Tantangan Coding Buat Kamu

Ganti lokasi map-nya jadi lokasi rumahmu 🏡
Tambahkan tombol untuk buka Instagram sekolah 📸
Desain ulang UI dengan tema sekolahmu sendiri 🎨
Tambahkan fitur "Ajukan pertanyaan" dengan Google Form 📋

📢 Penutup

Dengan project kecil ini, kamu udah belajar banyak:

Cara berkomunikasi dengan HTML di Flutter Web
Integrasi Google Maps
Interaksi tombol yang membuka link eksternal

Jangan lupa untuk eksplorasi lebih jauh, karena dunia Flutter itu luas banget, dan kalian sebagai siswa RPL punya potensi buat bikin aplikasi bermanfaat bukan hanya untuk tugas, tapi juga untuk masyarakat 💪

🔗 Yuk Coba Langsung!

Kamu bisa deploy aplikasi ini ke web pakai:

==============================

Projek hari ini menampilkan lokasi Google Maps di Flutter Web bukan sekadar latihan teknis, tapi punya makna besar dan manfaat nyata (real-world app), terutama untuk siswa kelas 12 RPL yang sebentar lagi akan masuk dunia industri, kuliah, atau wirausaha digital.

Berikut penjelasan apa yang menarik dan bermanfaat dari projek ini:

🎯 1. Aplikasi Dunia Nyata yang Banyak Digunakan

Aplikasi berbasis lokasi sangat umum dan dibutuhkan:

Aplikasi sekolah/kampus ➜ tampilkan lokasi dan rute
Website bisnis ➜ lokasi toko, kantor, cabang
Aplikasi travel ➜ lokasi wisata, penginapan, resto
Aplikasi komunitas ➜ lokasi event, tempat pertemuan
Aplikasi kurir/ojek online ➜ fitur arah dan tujuan

Artinya: Kemampuan kalian hari ini = skill yang langsung bisa dipakai di proyek nyata. 🔥

💡 2. Belajar Teknologi Dunia Kerja: Embed dan Web Integration

Kalian sedang belajar cara mengintegrasikan layanan luar (Google Maps) ke dalam aplikasi sendiri — ini kemampuan yang penting banget dalam dunia kerja:

Web developer → Integrasi API pihak ketiga
Mobile developer → Embed Maps & fitur kontak
Software engineer → Komunikasi antar-platform

Ini lebih dari coding — ini integrasi sistem, dan itu yang dicari perusahaan!

📱 3. Karya yang Bisa Ditunjukkan (Portofolio Digital)

Projek ini bisa kamu:

Deploy ke Web (via Netlify/Firebase Hosting)
Pamerkan ke guru lain/sekolah
Tampilkan di CV/LinkedIn/portofolio pribadi
Jadikan template untuk aplikasi lain

Projek ini bisa jadi langkah awal personal branding kamu sebagai programmer.

💬 4. Komunikasi Digital Zaman Now (WA Button + Maps)

Kamu bukan cuma bikin aplikasi diam, tapi:

Bisa dihubungi langsung lewat WhatsApp
Bisa diarahkan langsung ke lokasi via Google Maps

Artinya: Kamu bikin aplikasi yang bisa memudahkan orang lain secara nyata. 💥

🧠 5. Proyek Mini, Tapi Ilmunya Maksimal

Dengan hanya 1 halaman Flutter:

Kamu belajar iframe, HtmlElementView, dan platformViewRegistry
Kamu praktek url launcher via html.window.open
Kamu memikirkan user experience (UX) dan aksesibilitas

Jadi bukan hanya "bisa bikin", tapi paham logika dan tujuannya.

✨ Penutup: Ini Lebih dari Sekadar Maps

Hari ini kamu belajar coding yang bisa menyambungkan orang ke tempat, dan tempat ke tujuan.

Kamu bukan cuma programmer, kamu penghubung solusi digital.

Kalau postingan ini bermanfaat, bagikan ke temanmu, dan jangan lupa komen ide fitur yang ingin kamu tambahkan di aplikasi ini ya! 🚀

Klik logo Flutter dibawah ini, untuk mencoba di halaman ini!

Salam : Redaksi