Home Mobile Google Maps pada Flutter

Google Maps pada Flutter

Nalda Ayu Putri
-
0

Flutter adalah SDK aplikasi seluler Google untuk membuat pengalaman asli berkualitas tinggi di iOS dan Android dalam waktu singkat.

Dengan plugin Google Maps Flutter , Anda dapat menambahkan peta berdasarkan data peta Google ke aplikasi Anda. Plugin secara otomatis menangani akses ke server Google Maps, tampilan peta, dan respons terhadap gerakan pengguna seperti klik dan seret. Anda juga dapat menambahkan penanda ke peta Anda. Objek ini memberikan informasi tambahan untuk lokasi peta, dan memungkinkan pengguna untuk berinteraksi dengan peta.

Langkah – langkah membuat google maps flutter :

Menambahkan Plugin Google Maps Flutter sebagai Dapedencies

  • Menambahkan kemampuan tambahan ke aplikasi Flutter dengan mudah menggunakan paket Pub . Dalam tutorial ini, Anda memperkenalkan plugin Google Maps Flutter dengan menambahkan satu baris ke pubspec.yaml file.
dependencies:
  flutter:
    sdk: flutter
  # Add the following line
  google_maps_flutter: ^0.5.11
  • Lalu Pub get, kemudian Get depedencies

Menambahkan kunci API untuk aplikasi Android

Untuk menambahkan kunci API ke aplikasi Android, edit AndroidManifest.xmlfile di android/app/src/main. Tambahkan satu entri meta-data yang berisi kunci API yang dibuat pada langkah sebelumnya.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.magang.apss_mahasiswa_firebase">
   <application
        android:label="apss_mahasiswa_firebase"
        android:icon="@mipmap/ic_launcher">

       <meta-data android:name="com.google.android.geo.API_KEY"
           android:value="AIzaSyDnNrvxUelBjJHXe2PHsQTRdgssqZ_7U0g" />

        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <!-- Displays an Android View that continues showing the launch screen
                 Drawable until Flutter paints its first frame, then this splash
                 screen fades out. A splash screen is useful to avoid any visual
                 gap between the end of Android's launch screen and the painting of
                 Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

Menambahkan kunci API untuk aplikasi IOS

Untuk menambahkan kunci API ke aplikasi iOS, edit AppDelegate.mfile di ios/Runner. Tidak seperti Android, menambahkan kunci API di iOS memerlukan perubahan pada kode sumber aplikasi Runner. AppDelegate adalah singleton inti yang merupakan bagian dari proses inisialisasi aplikasi.

Buat dua perubahan pada file ini. Pertama, tambahkan #importpernyataan untuk menarik header Google Maps, lalu panggil provideAPIKey()metode GMSServicessingleton. Kunci API ini memungkinkan Google Maps menyajikan ubin peta dengan benar.

import UIKit
import Flutter
import GoogleMaps

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

Anda juga perlu menambahkan pengaturan ke ios/Runner/Info.plist. Entri ini memaksa Flutter di iOS ke mode single-threaded, yang diperlukan agar penyematan tampilan platform berfungsi. Batasan teknis ini sedang dikerjakan dan akan dicabut sebelum Google Maps keluar dari Pratinjau Pengembang.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>This app needs access to location when open.</string>
    <key>io.flutter.embedded_views_preview</key>
    <string>YES</string>
	<key>CFBundleDevelopmentRegion</key>
	<string>$(DEVELOPMENT_LANGUAGE)</string>
	<key>CFBundleExecutable</key>
	<string>$(EXECUTABLE_NAME)</string>
	<key>CFBundleIdentifier</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
	<key>CFBundleInfoDictionaryVersion</key>
	<string>6.0</string>
	<key>CFBundleName</key>
	<string>apss_mahasiswa_firebase</string>
	<key>CFBundlePackageType</key>
	<string>APPL</string>
	<key>CFBundleShortVersionString</key>
	<string>$(FLUTTER_BUILD_NAME)</string>
	<key>CFBundleSignature</key>
	<string>????</string>
	<key>CFBundleVersion</key>
	<string>$(FLUTTER_BUILD_NUMBER)</string>
	<key>LSRequiresIPhoneOS</key>
	<true/>
	<key>UILaunchStoryboardName</key>
	<string>LaunchScreen</string>
	<key>UIMainStoryboardFile</key>
	<string>Main</string>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UISupportedInterfaceOrientations~ipad</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
</dict>
</plist>

Membuat Code Maps di Flutter :

  • Edit pada main.dart :
import 'package:apss_mahasiswa_firebase/list_kampus/google_maps_page.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      backgroundColor: Colors.white
      ),
      home: GoogleMapsPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  • Edit pada file google_maps_page.dart :
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GoogleMapsPage extends StatefulWidget {
  @override
  _GoogleMapsPageState createState() => _GoogleMapsPageState();
}

class _GoogleMapsPageState extends State<GoogleMapsPage> {
  final Set<Marker> _markers = {};
  final LatLng _currentPosition =
    LatLng(-0.8971395757503112, 100.3507166778259);

  @override
  void initState() {
    _markers.add(
      Marker(
        markerId: MarkerId("-0.8971395757503112, 100.3507166778259"),
        position: _currentPosition,
        icon: BitmapDescriptor.defaultMarker,
      ),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Flutter'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: _currentPosition,
          zoom: 14.0,
        ),
        markers: _markers,
          onTap: (position) {
            setState(() {
              _markers.add(
                Marker(
                  markerId:
                  MarkerId("${position.latitude}, ${position.longitude}"),
                  icon: BitmapDescriptor.defaultMarker,
                  position: position,
                ),
              );
            });
          }
      ),
    );
  }
}

Hasil running di emulator hp :

© Newspaper WordPress Theme by TagDiv