Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menampilkan peta di flutter dan memberikan marker atau penanda. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Pada tutorial kita kali ini, kita akan membuat aplikasi sederhana yang menampilkan peta. Lalu terdapat marker dan bila marker ini di-tap, maka akan memunculkan bottomsheet berupa informasi tentang tempat tersebut.

Selain itu, kita kali ini tidak menggunakan google maps. Kita akan menggunakan openstreetmap sebagai gantinya. Bila kalian terkendala kartu kredit dan kesulitan menggunakan google maps, openstreetmap bisa menjadi solusinya. Scroll ke bagian bawah artikel ini untuk melihat hasil akhirnya.

Baca Artikel Lain ✨

📰 1. Membuat Aplikasi Berita dari Blogger API di Flutter read more

📰 2. Menampilkan Video Youtube Populer di Aplikasi Flutter dengan Youtube API read more

📰 3.Membuat Aplikasi Berita dengan API Wordpress read more

📰 4. Menggunakan State Management Provider pada Aplikasi Todo List Flutter read more

Cara Membuat Peta di Flutter dan Menambahkan Marker

1. Buatlah sebuah project baru dengan nama yang kalian inginkan. Gunakan flutter versi terbaru. Untuk flutter yang saya gunakan adalah versi 2.10 dengan sdk: ">=2.16.2 <3.0.0"

2. Buka file pubspec.yaml lalu tambahkan paket flutter_map: dan latlong: ^0.6.1 ikuti contohnya seperti gambar di bawah ini. Dan jangan lupa save file agar paket dapat terunduh.

3. Buka file main.dart lalu ganti dengan script yang ada di bawah ini.

import 'package:flutter/material.dart';
  import 'package:flutter_map/flutter_map.dart';
  import 'package:latlong2/latlong.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          body: OpenStreetMapWidget(),
        ),
      );
    }
  }
  
  class OpenStreetMapWidget extends StatefulWidget {
    @override
    State<OpenStreetMapWidget> createState() => _OpenStreetMapWidgetState();
  }
  
  class _OpenStreetMapWidgetState extends State<OpenStreetMapWidget> {
    void _showDetailsSheet(
        BuildContext context, String name, String about, String latlng) {
      showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(name),
                  ),
                  Divider(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Expanded(
                      child: Text(
                        about,
                        softWrap: true,
                      ),
                    ),
                  ),
                  Divider(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Expanded(
                      child: Text(
                        'LatLong: '+latlng,
                        softWrap: true,
                      ),
                    ),
                  ),
                  Divider(),
                ],
              ),
            ),
          );
        },
      );
    }
  
    @override
    Widget build(BuildContext context) {
      List<Marker> markers = [
        Marker(
          width: 80.0,
          height: 80.0,
          point: LatLng(-2.9917713, 104.7624691), // Koordinat marker
          builder: (ctx) => InkWell(
            onTap: () {
              _showDetailsSheet(
                  context,
                  'Ampera Bridge',
                  'Ampera Bridge, the icon of the capital city of South Sumatra, is a bridge erected on the Sumatran route that stretches over the Musi River. Built to link two areas, Ampera Bridge connects Seberang Ilir and Seberang Ulu, and further serves as a primary route for locals on a daily basis.',
                  '-2.9917713, 104.7624691');
            },
            child: Container(
              child: Icon(
                Icons.place,
                size: 40,
                color: Colors.red,
              ),
            ),
          ),
        ),
      ];
  
      return FlutterMap(
        options: MapOptions(
          center: LatLng(-2.9917713, 104.7624691),
          zoom: 14.0, // Tingkat zoom awal
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'], // Subdomain untuk permintaan tile
          ),
          MarkerLayerOptions(
            markers: markers,
          ),
        ],
      );
    }
  }

Penjelasan Script di atas:

1. Kelas OpenStreetMapWidget adalah turunan dari StatefulWidget, yang berarti widget ini memiliki state yang dapat berubah. Di dalamnya, kita mengimplementasikan fungsi build() yang akan merender tampilan peta OpenStreetMap.
2. Di dalam fungsi build(), kita membuat sebuah list markers yang berisi satu Marker. Marker adalah suatu objek yang merepresentasikan penanda pada peta. Di sini, kita menetapkan beberapa properti seperti width, height, point (koordinat marker), dan builder (fungsi untuk merender tampilan marker).
3. Fungsi _showDetailsSheet() digunakan untuk menampilkan modal bottom sheet saat pengguna mengetuk marker pada peta. Modal bottom sheet adalah suatu komponen antarmuka yang muncul dari bawah layar dan menyajikan informasi atau tindakan tambahan.\
4. Di dalam _showDetailsSheet(), kita menggunakan showModalBottomSheet() untuk menampilkan modal bottom sheet. Kita menentukan konteks (context) dan membangun tampilan modal bottom sheet menggunakan widget SingleChildScrollView, Container, dan Column.
5. List<Marker> markers = [ ... ]: Membuat list markers yang berisi objek Marker. Setiap Marker merepresentasikan sebuah penanda pada peta.
6. return FlutterMap(...);: Mengembalikan widget FlutterMap yang menampilkan peta dengan konfigurasi dan lapisan yang telah ditentukan sebelumnya.
7. MapOptions(...): Mengatur konfigurasi untuk tampilan peta seperti pusat dan tingkat zoom awal.
8. TileLayerOptions(...): Menetapkan lapisan tile peta dari OpenStreetMap dengan URL template yang ditentukan.
9. MarkerLayerOptions(...): Menetapkan lapisan marker pada peta dengan menggunakan markers yang telah didefinisikan sebelumnya.

4. Setelah semua step sudah dikerjakan, silahkan jalankan emulator. Jika berhasil, maka tampilannya akan tampak seperti gambar di bawah ini.

Mudah bukan?, sekarang kalian dapat membuat aplikasi android yang dapat menampilkan peta. Kalian juga dapat menampilkan marker dan menampilkan informasi di dalamnya. Improvisasi lagi aplikasi maps kalian dengan menggunakan google maps, data api dan fitur-fitur lainnya.

Sekian tutorial kali ini tentang Cara Membuat Peta di Flutter dan Menambahkan Marker. Semoga tutorial singkat ini bermanfaat. Jika ada yang kurang dipahami silahkan tanyakan langsung di kolom komentar di bawah ini. Sekian dan terima gaji.