Menyiapkan Project Flutter

Sebelum menyiapkan project Flutter, pastikan Anda telah menyelesaikan langkah-langkah prasyarat di bagian Sebelum memulai. Setelah mengaktifkan penagihan dan membuat kunci API, Anda dapat menyiapkan project Flutter yang Anda gunakan untuk mengembangkan aplikasi Anda.

Langkah 1: Instal software yang diperlukan

Untuk membuat project menggunakan paket Google Maps untuk Flutter, Anda harus menginstal Flutter SDK dan menyiapkan lingkungan pengembangan untuk platform target Anda. Lihat panduan penginstalan Flutter untuk mengetahui detailnya.

Langkah 2: Instal paket Google Maps untuk Flutter dalam project baru

Flutter menawarkan paket Google Maps untuk Flutter sebagai plugin Flutter.

Buat project Flutter dan tambahkan plugin Maps.

  1. Buat project Flutter baru menggunakan `flutter create`: 
      flutter create google_maps_in_flutter --platforms=android,ios,web
  
  Creating project google_maps_in_flutter...
  [Listing of created files elided]
  Wrote 127 files.

  All done!
    Kode aplikasi Anda ada di google_maps_in_flutter/lib/main.dart. Untuk menjalankan aplikasi Anda, ketik: 
      cd google_maps_in_flutter
  flutter run
    Aplikasi ini menarget iOS, Android dan Web. Google Maps SDK saat ini tidak mendukung aplikasi desktop di luar browser.
  2. Tambahkan plugin paket Google Maps untuk Flutter ke dalam project ini. 
    flutter pub add google_maps_flutter
  
  Resolving dependencies...
  [Listing of dependencies elided]

  Changed 14 dependencies!

Langkah 3: Tetapkan versi platform

Android

Tetapkan versi SDK minimum untuk Android.

  1. Buka file konfigurasi android/app/build.gradle di IDE pilihan Anda.
  2. Ubah nilai android.defaultConfig.minSdkVersion menjadi 21: 
      android {
    //...
    defaultConfig {
        applicationId "com.example.google_maps_in_flutter"
        minSdkVersion 21     // Set to 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    //...
  }
  3. Saat mengonfigurasi defaultConfig, tentukan ApplicationID unik Anda sendiri.
  4. Simpan file tersebut dan sinkronkan perubahan project Anda dengan Gradle.

iOS

Tetapkan versi platform iOS minimum.

  1. Buka file konfigurasi ios/Podfile di IDE pilihan Anda.
  2. Tambahkan baris berikut ke awal Podfile ini: 
      # Set platform to 14.0 to enable latest Google Maps SDK
  platform :ios, '14.0'

Langkah 4: Tambahkan kunci API Anda ke project

Di bagian Sebelum mulai, Anda membuat kunci API untuk aplikasi Anda. Sekarang tambahkan kunci tersebut ke project Flutter Anda. Untuk Flutter, Anda harus menambahkan kunci API ini ke semua platform target: iOS, Android, dan Web.

Pada contoh berikut, ganti YOUR_API_KEY dengan kunci API Anda.

Android

Untuk menyederhanakan tugas ini, sebaiknya Anda menggunakan Plugin Secrets Gradle untuk Android.

Untuk menginstal Plugin Secrets Gradle untuk Android di project Google Maps:

  1. Di Android Studio, buka file build.gradle atau build.gradle.kts tingkat teratas dan tambahkan kode berikut ke elemen dependencies di bagian buildscript.

    Groovy

    buildscript {
    dependencies {
        classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1"
    }
}

    Kotlin

    buildscript {
    dependencies {
        classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1")
    }
}
  2. Buka file build.gradle tingkat modul dan tambahkan kode berikut ke elemen plugins.

    Groovy

    plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

    Kotlin

    plugins {
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}
  3. Di file build.gradle tingkat modul, pastikan targetSdk dan compileSdk ditetapkan ke 34.
  4. Simpan file dan sinkronkan project Anda dengan Gradle.
  5. Buka file secrets.properties di direktori tingkat teratas, lalu tambahkan kode berikut. Ganti YOUR_API_KEY dengan kunci API Anda. Simpan kunci Anda dalam file ini karena secrets.properties tidak di-check in ke dalam sistem kontrol versi. 
    MAPS_API_KEY=YOUR_API_KEY
  6. Simpan file.

  7. Buat file local.defaults.properties di direktori tingkat teratas, folder yang sama dengan file secrets.properties, lalu tambahkan kode berikut.

    MAPS_API_KEY=DEFAULT_API_KEY

    File ini ditujukan untuk menyediakan lokasi cadangan Kunci API jika file secrets.properties tidak dapat ditemukan agar build tidak gagal. Build dapat gagal jika Anda meng-clone aplikasi dari sistem kontrol versi yang menghapus secrets.properties dan Anda belum membuat file secrets.properties secara lokal untuk memberikan Kunci API Anda.

  8. Simpan file.
  9. Di file AndroidManifest.xml, buka com.google.android.geo.API_KEY, lalu perbarui android:value attribute. Jika tag <meta-data> tidak ada, buat tag tersebut sebagai turunan dari tag <application>. 
    <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

    Note: com.google.android.geo.API_KEY is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Flutter SDK. For backwards compatibility, the API also supports the name com.google.android.maps.v2.API_KEY. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception.

  10. In Android Studio, open your module-level build.gradle or build.gradle.kts file and edit the secrets property. If the secrets property does not exist, add it.

    Edit the properties of the plugin to set propertiesFileName to secrets.properties, set defaultPropertiesFileName to local.defaults.properties, and set any other properties.

    Groovy

    secrets {
    // Optionally specify a different file name containing your secrets.
    // The plugin defaults to "local.properties"
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"

    // Configure which keys should be ignored by the plugin by providing regular expressions.
    // "sdk.dir" is ignored by default.
    ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
    ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
}

Kotlin

secrets {
    // Optionally specify a different file name containing your secrets.
    // The plugin defaults to "local.properties"
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"

    // Configure which keys should be ignored by the plugin by providing regular expressions.
    // "sdk.dir" is ignored by default.
    ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
    ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
}

Catatan: Seperti yang ditunjukkan di atas, com.google.android.geo.API_KEY adalah nama metadata yang disarankan untuk kunci API. Sebuah kunci dengan nama ini dapat digunakan untuk mengautentikasi ke beberapa API berbasis Google Maps di platform Android, termasuk Flutter SDK. Untuk kompatibilitas mundur, API tersebut juga mendukung nama com.google.android.maps.v2.API_KEY. Nama lama ini hanya memungkinkan autentikasi untuk Android Maps API v2. Aplikasi hanya dapat menetapkan salah satu nama metadata kunci API. Jika keduanya ditetapkan, API akan menampilkan pengecualian.

iOS

Tambahkan kunci API Anda ke file AppDelegate.swift Anda.

  1. Buka file ios/Runner/AppDelegate.swift di project Flutter Anda dengan IDE pilihan Anda.
  2. Tambahkan pernyataan impor berikut untuk menambahkan paket Google Maps untuk Flutter ke aplikasi Anda:
    3. import GoogleMaps
  3. Tambahkan API Anda ke metode application(_:didFinishLaunchingWithOptions:), dengan mengganti kunci API Anda dengan YOUR_API_KEY: 
    GMSServices.provideAPIKey("YOUR_API_KEY")
  4. Simpan dan tutup file AppDelegate.swift tersebut.

File AppDelegate.swift yang telah selesai akan terlihat seperti ini:

import UIKit
import Flutter
import GoogleMaps  // Add this import

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Add your Google Maps API key
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Web

Tambahkan kunci API Anda ke file aplikasi index.html Anda.

  1. Buka file web/index.html di project Flutter Anda dengan IDE pilihan Anda.
  2. Tambahkan tag skrip berikut di dalam tag <head>, dengan mengganti kunci API Anda dengan YOUR_API_KEY. 
    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>
  3. Simpan dan tutup file index.html tersebut.

    Bagian head yang telah selesai dalam index.html akan terlihat seperti ini:

        <head>
      <base href="/">
      
      <meta charset="UTF-8">
      <meta content="IE=Edge" http-equiv="X-UA-Compatible">
      <meta name="description" content="A new Flutter project.">
      
      <!-- iOS meta tags & icons -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter">
      <link rel="apple-touch-icon" href="icons/Icon-192.png">
      
      <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "YOUR_API_KEY",
          v: "weekly",
          // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
          // Add other bootstrap parameters as needed, using camel case.
          });
      </script>
      
      <title>google_maps_in_flutter</title>
      <link rel="manifest" href="manifest.json">
    </head>

Langkah 5: Tambahkan peta

Kode berikut menunjukkan cara menambahkan peta sederhana ke aplikasi Flutter baru.

  1. Buka file lib/main.dart di project Flutter Anda dengan IDE pilihan Anda.
  2. Tambahkan atau perbarui metode dalam metode utama default di aplikasi Anda untuk membuat dan menginisialisasi instance mapController. 
          import 'package:flutter/material.dart';
      import 'package:google_maps_flutter/google_maps_flutter.dart';
      
      void main() => runApp(const MyApp());
      
      class MyApp extends StatefulWidget {
        const MyApp({super.key});
      
        @override
        State<MyApp> createState() => _MyAppState();
      }
      
      class _MyAppState extends State<MyApp> {
        late GoogleMapController mapController;
      
        final LatLng _center = const LatLng(-33.86, 151.20);
      
        void _onMapCreated(GoogleMapController controller) {
          mapController = controller;
        }
      
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            home: Scaffold(
              appBar: AppBar(
                title: const Text('Maps Sample App'),
                backgroundColor: Colors.green[700],
              ),
              body: GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 11.0,
                ),
              ),
            ),
          );
        }
      }
  3. Aktifkan emulator atau perangkat apa pun tempat Anda ingin menjalankan aplikasi Anda.
  4. Jalankan aplikasi Anda. Anda akan melihat output yang serupa dengan hal berikut: 
      flutter run

   
    Multiple devices found:
    Android phone (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    iPhone (mobile)  • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
    Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124
    [1]: Android phone
    [2]: iPhone
    [3]: Chrome
    
    Please choose one (To quit, press "q/Q"):

    Ketik nomor platform yang ingin Anda jalankan. Setiap kali Anda memanggil flutter run, Flutter akan memberi Anda pilihan ini. Jika sistem pengembangan Anda tidak memiliki emulator yang berjalan atau perangkat pengujian yang terhubung, Flutter akan memilih untuk membuka Chrome.

    Setiap platform akan menampilkan peta yang berpusat di Sydney, Australia. Jika peta tersebut tidak muncul, periksa apakah Anda telah menambahkan kunci API Anda ke project target yang benar.

Langkah berikutnya

Setelah memiliki kunci API dan project Flutter, Anda dapat membuat dan menjalankan aplikasi. Paket Google Maps untuk Flutter menyediakan berbagai tutorial dan aplikasi contoh yang dapat membantu Anda memulai. Untuk mempelajari lebih lanjut, lihat referensi berikut: