Aplikasi Flutter menjadi satu media yang memudahkan penggabungan Google Maps pada aplikasi yang Anda gunakan sekaligus menyederhanakan proses pembuatan tampilan antarmuka yang konsisten dan menarik. Berikut cara menggunakan Google Maps dalam aplikasi Flutter dalam tutorial lengkapnya.
Penggunaan Google Maps di Aplikasi Flutter
Google Maps kini sudah banyak digunakan untuk berbagai kebutuhan hidup masyarakat masa kini. Dari mulai untuk mencari petunjuk arah jalan pada suatu tempat, mendapatkan lokasi rumah makan atau SPBU terdekat dan lainnya. Dengan menambahkan penggunaan Google Maps pada aplikasi yang digunakan pada ponsel Anda maka bisa memberikan kesempatan untuk memperoleh kegunaan lainnya.
Diketahui Google Maps memberikan penawaran sederet fitur bermanfaat untuk bisa mengintegrasikan peta pada aplikasi Flutter yang Anda gunakan. Hal tersebut mencakup layanan untuk menambahkan poligon, berinteraksi dengan peta, menggunakan layanan geolokasi dan menampilkan peta lokasi yang dibutuhkan.
Baca Juga: Panduan Deploy Flutter Ke Google Play Store
Untuk bisa menggunakan Google Maps dalam aplikasi Flutter, kita membutuhkan aplikasi pihak ketiga kemudian melakukan pengaturan sesuai kebutuhan. Berikut ini adalah tutorial lengkap untuk cara menggunakan Google Maps dalam aplikasi Flutter dengan plugin resmi yaitu:
1. Siapkan plugin Googlemapsflutter
Hal pertama yang penting untuk Anda lakukan adalah untuk membuat proyek di Google Developers Console karena untuk menggunakannya dibutuhkan API. Anda bisa membuka file pubspec.yaml pada proyek Flutter Anda lalu tambahkan baris berikut pada bagian bawah dependensi dan pub. Google Maps bisa digunakan dengan adanya kunci API, maka ikuti dokumentasi resmi yang diperoleh untuk memperoleh kunci API.
2. Tahapan memiliki kunci API
Untuk bisa mendapatkan kunci API Anda bisa menggunakan langkah berikut:
- Buka Firebase Console dan Anda akan mendapatkan sebuah tampilan konsol
- Pilih jenis proyek yang tersedia atau bisa juga memilih untuk membuat jenis proyek baru dengan tujuan mengintegrasikan penggunaan Google Maps
- Aktifkan API “Maps SDK untuk perangkat Android” dan “Maps SDK untuk perangkat iOS” dengan cara memilih menu “Perpustakaan” pada “API & Layanan yang Diaktifkan”
- Dibutuhkan kunci Google API untuk bisa diintegrasikan pada proyek yang sedang dijalankan. Caranya adalah dengan memilih menu “API&Layanan” dari laci kemudian klik menu “API&Layanan yang Diaktifkan”
- Selanjutnya, pilih menu kredensial kemudian Anda akan melihat pilihan menu di bagian atas “Buat Kredensial” pada konsol kemudian klik pada bagian atasnya
- Anda akan melihat keberadaan kunci API yang terdapat di dalam bagian “Kunci API”
- Dalam tahapan tersebut, Anda bisa membuat dua kunci yang digunakan khusus untuk perangkat iOS dan Android sehingga pelacakannya bisa dilakukan dengan jelas serta akurat
- Segera catat kunci API yang diperoleh karena selanjutnya Anda akan membutuhkannya untuk digunakan pada tahapan berikutnya
Baca Juga: Konsep Integrasi API Pada Flutter & Cara Penerapannya
3. Konfigurasi perangkat iOS dan Android pada proyek yang dibuat
Untuk melakukan konfigurasi Android Anda bisa melakukan langkah berikut :
- Buka file android/app/src/main/Androidmanifest.xml kemudian tambahan pemberian izin berikut tepat sebelum bagian tag penutup
- Berikutnya pada tag Anda bisa menambahkan adanya elemen metadata berikut dengan menggunakan kunci API yang diperoleh
- Jangan lupa untuk mengganti “YOUR_API_KEY” dengan menggunakan kunci yang diperoleh secara resmi dari konsol developer
- Lakukan perubahan pada kompilasiSdkVersion
- Jika muncul notifikasi bahwa Anda melakukan kesalahan pada saat membuat perubahan pada versi ext.kotlin, bisa diatasi dengan menempelkan Kotlin versi paling baru yang digunakan proyek build file tingkat.
- Lakukan konfigurasi iOS dengan cara membuka file iOS/Runner/Info.plist kemudian tambahkan pasangan nilai kunci yang diperoleh
- Selanjutnya buka file iOS/Runner?AppDelegate.swift kemudian tambahkan pernyataan untuk melakukan “Import Google Maps” pada bagian atas tampilan layar. Jangan lupa tambahkan juga kode GMSServices yang terlihat di layar yang kemudian akan muncul hasil tertentu.
Itulah beberapa langkah yang Anda butuhkan untuk menggunakan Google Maps dalam aplikasi Flutter yang digunakan pada perangkat Android. Nah berikutnya adalah untuk menambahkan penggunaan Google Maps di Flutter pada perangkat iOS juga bisa dilakukan dengan cara sebagai berikut:
1. Tentukan kunci API
Langkah yang pertama adalah dengan menentukan kunci API milik Anda pada aplikasi yang digunakan yaitu ios/Runner/AppDelegate.swift. Selanjutnya tulis perintah import GoogleMaps pada pernyataan di atas dengan tujuan untuk menghindari terjadinya masalah pada build di IOS.
2. Tambahkan izin lokasi
Langkah berikutnya adalah untuk membuka Xcode kemudian tambahkan pengaturan izin lokasi pada file :
info.plist <key> NSLocationWhenInUseUsageDescription </key> <string> Aplikasi membutuhkan izin lokasi </string>
Kini perangkat iOS Anda juga sudah bisa menggunakan Google Maps pada aplikasi Flutter yang terinstal di perangkat tersebut sesuai kebutuhan. Apabila Anda sudah selesai untuk melakukan semua intruksi yang diberikan di atas, maka kini Anda sudah bisa mulai menggunakan widget GoogleMap di Flutter.
Baca Juga: Install Flutter: Tutorial Untuk Windows, Mac & Linux Untuk Pemula
Cara Menggunakan Widget Google Maps di Aplikasi Flutter
Setelah semua langkah yang disebutkan di atas sudah dilakukan dengan baik, selanjutnya Anda sudah bisa menayangkan peta yang dibutuhkan dengan menggunakan Google Maps dalam aplikasi Flutter.
Setidaknya ada beberapa hal mendasar yang perlu dipahami sehingga bisa menayangkan sebuah peta di aplikasi hanya dengan menggunakan beberapa baris kode saja.
Setelah Anda memperoleh peta dasar yang ditayangkan di layar, selanjutnya bisa memperbesar dan memperkecil peta serta menggulirnya sesuai kebutuhan. Berikut beberapa hal mendasar yang perlu dipahami dengan baik dan benar yaitu:
- GoogleMapController yaitu sebuah alat pengendali untuk satu instansi GoogleMap yang dioperasikan pada sebuah platform host tertentu. Pengendali ini memiliki fungsi untuk mengelola beragam fungsi meliputi animasi, zoom, posisi kamera dan lain sebagainya
- OnMapCreated, adalah sebuah metode yang digunakan pada saat proses pembuatan peta dan dibuat dengan menggunakan tolok ukur GoogleMapController
- InitialCameraPosition, merupakan sebuah gambaran yang memberikan letak posisi awal ketika peta dibuka untuk pertama kalinya. Prosedurnya dilakukan dengan menggunakan fitur Widget Camera Position yang mengambil LatLng yang terdapat di property target yang ditujunya. Pada proses ini kamera akan memberikan gambaran yang jelas mengenai posisi apa di peta yang harus bisa diakses dan dilihat oleh pengguna sesuai kebutuhan.
Ada banyak keuntungan jika Anda memiliki widget khusus yang bernama GoogleMap dalam Flutter, diantaranya adalah bisa berinteraksi dengan leluasa dengan peta.
Anda juga bisa menggeser, memperbesar dan memperkecil peta, menayangkan kondisi lalu lintas terkini di peta, menunjukkan lokasi terdekat, menggunakan penanda, melihat pratinjau peta dengan beragam medan dan gaya standar maupun malam.
Dengan adanya GoogleMaps pada Flutter maka Anda juga bisa menggambar rute yang dituju pada peta kemudian melakukan pembaruan secara real-time sesuai dengan perubahan data lokasi terkini.
Sekian penjelasan singkat tentang menggunakan Google Maps dalam aplikasi Flutter. Jika Anda berminat untuk belajar tentang perancangan dan pengembangan aplikasi maka bisa mengikuti kursus IT online di Course-Net.
Tersedia kursus flutter pembuatan dan pengembangan aplikasi mobile baik untuk digunakan pada perangkat iOS, android dan Flutter sehingga Anda bisa mendesain aplikasi sesuai kebutuhan serta keinginan. Yuk daftar sekarang juga.
