Membuat Aplikasi Peta dan Rute Menggunakan Flutter: Praktis & Interaktif

Di era digital saat ini, aplikasi peta dan navigasi sangat membantu kita dalam menemukan lokasi dan mendapatkan rute tercepat menuju tujuan. Kali ini, saya akan membagikan tutorial sederhana membuat aplikasi peta interaktif menggunakan Flutter yang dapat menampilkan lokasi, membuka rute di Google Maps, serta fitur langsung menghubungi via WhatsApp!

Fitur Utama Aplikasi

• Peta interaktif dengan marker lokasi yang bisa dipindah dengan mengetuk peta.

• Tombol untuk membuka rute ke lokasi tujuan langsung di Google Maps.

• Tombol untuk menghubungi nomor WhatsApp melalui aplikasi WhatsApp dengan pesan otomatis.

• Menampilkan dialog informasi koordinat saat marker ditekan.

---

Inti Kode Flutter

Kode ini menggunakan beberapa package utama:

• flutter_map untuk menampilkan peta berbasis OpenStreetMap.

• latlong2 untuk mengelola koordinat lokasi.

• url_launcher untuk membuka URL seperti Google Maps dan WhatsApp.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:url_launcher/url_launcher_string.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MapScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  LatLng lokasi = LatLng(-7.3704128308215555, 108.52693777277032);

  void _ubahLokasi(LatLng lokasiBaru) {
    setState(() {
      lokasi = lokasiBaru;
    });
  }

  Future<void> _bukaGoogleMaps() async {
    final url = Uri.encodeFull(
      'https://www.google.com/maps/dir/?api=1&destination=${lokasi.latitude},${lokasi.longitude}&travelmode=driving',
    );

    if (await canLaunchUrlString(url)) {
      await launchUrlString(url);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Tidak dapat membuka Google Maps')),
      );
    }
  }

  Future<void> _bukaWhatsApp() async {
    const nomorWhatsApp = '6281234567890'; // Ganti nomor tujuan tanpa tanda +
    const pesan = 'Halo, saya ingin menghubungi Anda.';
    final url = Uri.encodeFull('https://wa.me/$nomorWhatsApp?text=$pesan');

    if (await canLaunchUrlString(url)) {
      await launchUrlString(url);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Tidak dapat membuka WhatsApp')),
      );
    }
  }

  void _showInfoLokasi() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Info Lokasi'),
        content: Text('Koordinat: ${lokasi.latitude}, ${lokasi.longitude}'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text('Tutup'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Peta')),
      body: Column(
        children: [
          Expanded(
            child: FlutterMap(
              options: MapOptions(
                center: lokasi,
                zoom: 13.0,
                onTap: (tapPosition, point) {
                  _ubahLokasi(point);
                },
              ),
              children: [
                TileLayer(
                  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: const ['a', 'b', 'c'],
                ),
                MarkerLayer(
                  markers: [
                    Marker(
                      point: lokasi,
                      width: 40,
                      height: 40,
                      builder: (ctx) => GestureDetector(
                        onTap: _showInfoLokasi,
                        child: const Icon(
                          Icons.location_on,
                          size: 40,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
              child: Column(
                children: [
                  SizedBox(
                    width: double.infinity,
                    height: 50,
                    child: ElevatedButton.icon(
                      icon: const Icon(Icons.directions),
                      label: const Text('Buka Rute di Google Maps'),
                      onPressed: _bukaGoogleMaps,
                    ),
                  ),
                  const SizedBox(height: 8),
                  SizedBox(
                    width: double.infinity,
                    height: 50,
                    child: ElevatedButton.icon(
                      icon: const Icon(Icons.chat),
                      label: const Text('Hubungi via WhatsApp'),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.green[700],
                      ),
                      onPressed: _bukaWhatsApp,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

Cara Kerja Aplikasi

• Saat pengguna mengetuk peta, posisi marker merah akan berpindah ke titik yang dipilih.

• Tombol Buka Rute di Google Maps membuka aplikasi Google Maps dengan rute dari lokasi pengguna ke koordinat yang dipilih.

• Tombol Hubungi via WhatsApp membuka chat WhatsApp dengan nomor tujuan dan pesan otomatis.

• Ketika marker ditekan, muncul dialog yang menampilkan koordinat lokasi saat ini.

---

Kesimpulan

Aplikasi ini sangat berguna untuk kebutuhan navigasi sederhana yang menggabungkan peta, rute, dan komunikasi langsung via WhatsApp. Flutter memudahkan pengembangan aplikasi lintas platform dengan performa yang baik.