1. Einführung
Flutter ist das mobile App-SDK von Google, mit dem sich in Rekordzeit hochwertige native Apps für iOS und Android entwickeln lassen.
Mit dem Google Maps Flutter-Plug-in können Sie Karten, die auf Google Maps-Daten basieren, in Ihre App einfügen. Über das Plug-in werden der Zugriff auf die Google Maps-Server, die Kartenanzeige und die Reaktion auf Nutzergesten wie Klicks und Ziehbewegungen automatisch verwaltet. Sie können Ihrer Karte auch Markierungen hinzufügen. Diese Objekte liefern zusätzliche Informationen zu den Orten auf der Karte und ermöglichen Nutzern die Interaktion mit der Karte.
Umfang
In diesem Codelab erstellen Sie eine mobile App mit einer Google-Karte mithilfe des Flutter SDK. Mit der Anwendung können Sie Folgendes tun:
|
|
Was ist Flutter?
Flutter bietet drei Hauptfunktionen.
- Schnelle Entwicklung: Mit Stateful Hot Reload können Sie Ihre Android- und iOS-Apps in Millisekunden erstellen.
- Ausdrucksstark und flexibel: Sie können Funktionen schnell bereitstellen und dabei den Fokus auf native Endnutzererlebnisse legen.
- Native Leistung auf iOS und Android: Die Widgets von Flutter berücksichtigen alle wichtigen Plattformunterschiede wie Scrollen, Navigation, Symbole und Schriftarten, um eine vollständig native Leistung zu bieten.
Google Maps bietet:
- 99% der Welt abgedeckt: Sie können Karten mit verlässlichen, umfassenden Daten für mehr als 200 Länder und Gebiete erstellen.
- 25 Millionen Aktualisierungen täglich: Sie erhalten genaue Standortinformationen in Echtzeit.
- 1 Milliarde monatlich aktive Nutzer: Die Infrastruktur von Google Maps ermöglicht eine zuverlässige Skalierung.
In diesem Codelab erfahren Sie, wie Sie eine Google Maps-Funktion in einer Flutter-App für iOS und Android erstellen.
Lerninhalte
- Neue Flutter-Anwendung erstellen
- Google Maps Flutter-Plug-in konfigurieren
- So fügen Sie einer Karte Markierungen hinzu, indem Sie Standortdaten aus einem Webdienst verwenden.
In diesem Codelab geht es darum, einer Flutter-App eine Google-Karte hinzuzufügen. Irrelevante Konzepte und Codeblöcke werden nicht beachtet und stehen zum einfachen Kopieren und Einfügen zur Verfügung.
Was möchten Sie in diesem Codelab lernen?
2. Flutter-Umgebung einrichten
Für dieses Lab benötigen Sie zwei Softwarekomponenten: das Flutter SDK und einen Editor. In diesem Codelab wird Android Studio verwendet, Sie können aber auch einen anderen Editor verwenden.
Sie können dieses Codelab auf einem der folgenden Geräte ausführen:
- Ein physisches Gerät (Android oder iOS), das mit Ihrem Computer verbunden ist und auf dem der Entwicklermodus aktiviert ist.
- iOS-Simulator Xcode-Tools installieren ist erforderlich.
- Der Android Emulator. (Erfordert die Einrichtung in Android Studio.)
3. Erste Schritte
Erste Schritte mit Flutter
Am einfachsten beginnen Sie mit Flutter, indem Sie mit dem Flutter-Befehlszeilentool den gesamten erforderlichen Code für einen einfachen Einstieg erstellen.
$ flutter create google_maps_in_flutter --platforms android,ios,web Creating project google_maps_in_flutter... Resolving dependencies in `google_maps_in_flutter`... Downloading packages... Got dependencies in `google_maps_in_flutter`. Wrote 81 files. All done! You can find general documentation for Flutter at: https://docs.flutter.dev/ Detailed API documentation is available at: https://api.flutter.dev/ If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev In order to run your application, type: $ cd google_maps_in_flutter $ flutter run Your application code is in google_maps_in_flutter/lib/main.dart.
Google Maps Flutter-Plug-in als Abhängigkeit hinzufügen
Mit Pub-Paketen lassen sich Flutter-Apps ganz einfach um zusätzliche Funktionen erweitern. In diesem Codelab führen Sie das Google Maps Flutter-Plug-in ein, indem Sie den folgenden Befehl im Projektverzeichnis ausführen.
$ cd google_maps_in_flutter $ flutter pub add google_maps_flutter Resolving dependencies... Downloading packages... + csslib 1.0.0 + flutter_plugin_android_lifecycle 2.0.19 + flutter_web_plugins 0.0.0 from sdk flutter + google_maps 7.1.0 + google_maps_flutter 2.6.1 + google_maps_flutter_android 2.8.0 + google_maps_flutter_ios 2.6.0 + google_maps_flutter_platform_interface 2.6.0 + google_maps_flutter_web 0.5.7 + html 0.15.4 + js 0.6.7 (0.7.1 available) + js_wrapping 0.7.4 leak_tracker 10.0.4 (10.0.5 available) leak_tracker_flutter_testing 3.0.3 (3.0.5 available) material_color_utilities 0.8.0 (0.11.1 available) meta 1.12.0 (1.14.0 available) + plugin_platform_interface 2.1.8 + sanitize_html 2.1.0 + stream_transform 2.1.0 test_api 0.7.0 (0.7.1 available) + web 0.5.1 Changed 16 dependencies! 6 packages have newer versions incompatible with dependency constraints. Try `flutter pub outdated` for more information.
iOS-Gerät für platform konfigurieren
Für die aktuelle Version des Google Maps SDK für iOS ist mindestens iOS 14 erforderlich. Ändern Sie den Anfang der Konfigurationsdatei ios/Podfile so:
ios/Podfile
# Google Maps SDK requires platform version 14
# https://developers.google.com/maps/flutter-package/config#ios
platform :ios, '14.0'
# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'
Android minSDK konfigurieren
Wenn Sie das Google Maps SDK unter Android verwenden möchten, müssen Sie minSdk auf 21 festlegen. Ändern Sie die Konfigurationsdatei android/app/build.gradle so:
android/app/build.gradle
android {
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId = "com.example.google_maps_in_flutter"
// Minimum Android version for Google Maps SDK
// https://developers.google.com/maps/flutter-package/config#android
minSdk = 21
targetSdk = flutter.targetSdkVersion
versionCode = flutterVersionCode.toInteger()
versionName = flutterVersionName
}
}
4. Google Maps in die App einfügen
API-Schlüssel
Wenn Sie Google Maps in Ihrer Flutter-App verwenden möchten, müssen Sie ein API-Projekt mit der Google Maps Platform konfigurieren. Folgen Sie dazu der Anleitung unter API-Schlüssel verwenden für das Maps SDK for Android, API-Schlüssel verwenden für das Maps SDK for iOS und API-Schlüssel verwenden für die Maps JavaScript API. Führen Sie mit den API-Schlüsseln die folgenden Schritte aus, um sowohl Android- als auch iOS-Anwendungen zu konfigurieren.
API-Schlüssel für eine Android-App hinzufügen
Wenn Sie der Android-App einen API-Schlüssel hinzufügen möchten, bearbeiten Sie die Datei AndroidManifest.xml in android/app/src/main. Fügen Sie im application-Knoten einen einzelnen meta-data-Eintrag mit dem im vorherigen Schritt erstellten API-Schlüssel hinzu.
android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:label="google_maps_in_flutter"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<!-- TODO: Add your Google Maps API key here -->
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR-KEY-HERE"/>
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:taskAffinity=""
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. -->
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<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>
<!-- Required to query activities that can process text, see:
https://developer.android.com/training/package-visibility and
https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
<queries>
<intent>
<action android:name="android.intent.action.PROCESS_TEXT"/>
<data android:mimeType="text/plain"/>
</intent>
</queries>
</manifest>
API-Schlüssel für eine iOS-App hinzufügen
Wenn Sie der iOS-App einen API-Schlüssel hinzufügen möchten, bearbeiten Sie die Datei AppDelegate.swift in ios/Runner. Im Gegensatz zu Android erfordert das Hinzufügen eines API-Schlüssels unter iOS Änderungen am Quellcode der Runner-App. Das AppDelegate ist das zentrale Singleton, das Teil des App-Initialisierungsprozesses ist.
Nehmen Sie zwei Änderungen an dieser Datei vor. Fügen Sie zuerst eine #import-Anweisung hinzu, um die Google Maps-Header abzurufen, und rufen Sie dann die provideAPIKey()-Methode des GMSServices-Singleton auf. Mit diesem API-Schlüssel kann Google Maps Kartenkacheln korrekt bereitstellen.
ios/Runner/AppDelegate.swift
import Flutter
import UIKit
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") // Add this line
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
API-Schlüssel für eine Web-App hinzufügen
Wenn Sie der Web-App einen API-Schlüssel hinzufügen möchten, bearbeiten Sie die Datei index.html in web. Fügen Sie im head-Bereich einen Verweis auf das Maps JavaScript-Script mit Ihrem API-Schlüssel ein.
web/index.html
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_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">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<!-- Add your Google Maps API key here -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
<title>google_maps_in_flutter</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
</body>
</html>
Karte auf dem Bildschirm anzeigen
Jetzt ist es an der Zeit, eine Karte auf dem Bildschirm anzuzeigen. Ersetzen Sie den Inhalt von lib/main.dart durch Folgendes.
lib/main.dart
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(45.521563, -122.677433);
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green[700],
),
home: Scaffold(
appBar: AppBar(
title: const Text('Maps Sample App'),
elevation: 2,
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
),
),
);
}
}
App ausführen
Führen Sie die Flutter-App unter iOS oder Android aus, um eine einzelne Kartenansicht zu sehen, die auf Portland zentriert ist. Alternativ können Sie einen Android-Emulator oder einen iOS-Simulator starten. Sie können den Kartenmittelpunkt jederzeit ändern, um Ihren Wohnort oder einen anderen für Sie wichtigen Ort darzustellen.
$ flutter run
|
|
5. Google auf der Karte
Google hat viele Büros auf der ganzen Welt, von Nordamerika über Lateinamerika, Europa und den asiatisch-pazifischen Raum bis hin zu Afrika und dem Nahen Osten. Das Schöne an diesen Karten ist, dass sie einen einfach zu verwendenden API-Endpunkt für die Bereitstellung der Informationen zum Bürostandort im JSON-Format haben. In diesem Schritt fügen Sie diese Bürostandorte auf der Karte ein. In diesem Schritt verwenden Sie die Codegenerierung, um JSON zu parsen.
Fügen Sie dem Projekt drei neue Flutter-Abhängigkeiten hinzu: Fügen Sie das Paket http hinzu, um HTTP-Anfragen einfach zu stellen, json_serializable und json_annotation, um die Objektstruktur zur Darstellung von JSON-Dokumenten zu deklarieren, und build_runner für die Unterstützung der Codegenerierung.
$ flutter pub add http json_annotation json_serializable dev:build_runner Resolving dependencies... Downloading packages... + _fe_analyzer_shared 67.0.0 (68.0.0 available) + analyzer 6.4.1 (6.5.0 available) + args 2.5.0 + build 2.4.1 + build_config 1.1.1 + build_daemon 4.0.1 + build_resolvers 2.4.2 + build_runner 2.4.9 + build_runner_core 7.3.0 + built_collection 5.1.1 + built_value 8.9.2 + checked_yaml 2.0.3 + code_builder 4.10.0 + convert 3.1.1 + crypto 3.0.3 + dart_style 2.3.6 + file 7.0.0 + fixnum 1.1.0 + frontend_server_client 4.0.0 + glob 2.1.2 + graphs 2.3.1 + http 1.2.1 + http_multi_server 3.2.1 + http_parser 4.0.2 + io 1.0.4 js 0.6.7 (0.7.1 available) + json_annotation 4.9.0 + json_serializable 6.8.0 leak_tracker 10.0.4 (10.0.5 available) leak_tracker_flutter_testing 3.0.3 (3.0.5 available) + logging 1.2.0 material_color_utilities 0.8.0 (0.11.1 available) meta 1.12.0 (1.14.0 available) + mime 1.0.5 + package_config 2.1.0 + pool 1.5.1 + pub_semver 2.1.4 + pubspec_parse 1.2.3 + shelf 1.4.1 + shelf_web_socket 1.0.4 + source_gen 1.5.0 + source_helper 1.3.4 test_api 0.7.0 (0.7.1 available) + timing 1.0.1 + typed_data 1.3.2 + watcher 1.1.0 + web_socket_channel 2.4.5 + yaml 3.1.2 Changed 42 dependencies! 8 packages have newer versions incompatible with dependency constraints. Try `flutter pub outdated` for more information.
JSON mit Codegenerierung parsen
Die vom API-Endpunkt zurückgegebenen JSON-Daten haben eine regelmäßige Struktur. Es wäre praktisch, den Code zu generieren, um diese Daten in Objekte zu konvertieren, die Sie im Code verwenden können.
Erstellen Sie im Verzeichnis lib/src eine Datei namens locations.dart und beschreiben Sie die Struktur der zurückgegebenen JSON-Daten so:
lib/src/locations.dart
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:http/http.dart' as http;
import 'package:json_annotation/json_annotation.dart';
part 'locations.g.dart';
@JsonSerializable()
class LatLng {
LatLng({
required this.lat,
required this.lng,
});
factory LatLng.fromJson(Map<String, dynamic> json) => _$LatLngFromJson(json);
Map<String, dynamic> toJson() => _$LatLngToJson(this);
final double lat;
final double lng;
}
@JsonSerializable()
class Region {
Region({
required this.coords,
required this.id,
required this.name,
required this.zoom,
});
factory Region.fromJson(Map<String, dynamic> json) => _$RegionFromJson(json);
Map<String, dynamic> toJson() => _$RegionToJson(this);
final LatLng coords;
final String id;
final String name;
final double zoom;
}
@JsonSerializable()
class Office {
Office({
required this.address,
required this.id,
required this.image,
required this.lat,
required this.lng,
required this.name,
required this.phone,
required this.region,
});
factory Office.fromJson(Map<String, dynamic> json) => _$OfficeFromJson(json);
Map<String, dynamic> toJson() => _$OfficeToJson(this);
final String address;
final String id;
final String image;
final double lat;
final double lng;
final String name;
final String phone;
final String region;
}
@JsonSerializable()
class Locations {
Locations({
required this.offices,
required this.regions,
});
factory Locations.fromJson(Map<String, dynamic> json) =>
_$LocationsFromJson(json);
Map<String, dynamic> toJson() => _$LocationsToJson(this);
final List<Office> offices;
final List<Region> regions;
}
Future<Locations> getGoogleOffices() async {
const googleLocationsURL = 'https://about.google/static/data/locations.json';
// Retrieve the locations of Google offices
try {
final response = await http.get(Uri.parse(googleLocationsURL));
if (response.statusCode == 200) {
return Locations.fromJson(
json.decode(response.body) as Map<String, dynamic>);
}
} catch (e) {
if (kDebugMode) {
print(e);
}
}
// Fallback for when the above HTTP request fails.
return Locations.fromJson(
json.decode(
await rootBundle.loadString('assets/locations.json'),
) as Map<String, dynamic>,
);
}
Nachdem Sie diesen Code hinzugefügt haben, sollten in Ihrer IDE (falls Sie eine verwenden) einige rote Schlangenlinien angezeigt werden, da auf eine nicht vorhandene gleichgeordnete Datei verwiesen wird: locations.g.dart.. In dieser generierten Datei wird zwischen untypisierten JSON-Strukturen und benannten Objekten konvertiert. Erstellen Sie sie mit dem folgenden Befehl:build_runner
$ dart run build_runner build --delete-conflicting-outputs [INFO] Generating build script... [INFO] Generating build script completed, took 357ms [INFO] Creating build script snapshot...... [INFO] Creating build script snapshot... completed, took 10.5s [INFO] There was output on stdout while compiling the build script snapshot, run with `--verbose` to see it (you will need to run a `clean` first to re-snapshot). [INFO] Initializing inputs [INFO] Building new asset graph... [INFO] Building new asset graph completed, took 646ms [INFO] Checking for unexpected pre-existing outputs.... [INFO] Deleting 1 declared outputs which already existed on disk. [INFO] Checking for unexpected pre-existing outputs. completed, took 3ms [INFO] Running build... [INFO] Generating SDK summary... [INFO] 3.4s elapsed, 0/3 actions completed. [INFO] Generating SDK summary completed, took 3.4s [INFO] 4.7s elapsed, 2/3 actions completed. [INFO] Running build completed, took 4.7s [INFO] Caching finalized dependency graph... [INFO] Caching finalized dependency graph completed, took 36ms [INFO] Succeeded after 4.8s with 2 outputs (7 actions)
Ihr Code sollte jetzt wieder fehlerfrei analysiert werden. Als Nächstes fügen wir die Fallback-Datei „locations.json“ hinzu, die in der Funktion getGoogleOffices verwendet wird. Einer der Gründe für diesen Fallback ist, dass die in dieser Funktion geladenen statischen Daten ohne CORS-Header bereitgestellt werden und daher in einem Webbrowser nicht geladen werden können. Für die Flutter-Apps für Android und iOS sind keine CORS-Header erforderlich, aber der Zugriff auf mobile Daten kann manchmal schwierig sein.
Rufen Sie in Ihrem Browser https://about.google/static/data/locations.json auf und speichern Sie den Inhalt im Asset-Verzeichnis. Alternativ können Sie die Befehlszeile wie folgt verwenden.
$ mkdir assets
$ cd assets
$ curl -o locations.json https://about.google/static/data/locations.json
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 30348 100 30348 0 0 75492 0 --:--:-- --:--:-- --:--:-- 75492
Nachdem Sie die Asset-Datei heruntergeladen haben, fügen Sie sie dem Flutter-Abschnitt Ihrer pubspec.yaml-Datei hinzu.
pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/locations.json
Ändern Sie die Datei main.dart, um die Kartendaten anzufordern, und fügen Sie dann mit den zurückgegebenen Informationen Büros in die Karte ein:
lib/main.dart
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'src/locations.dart' as locations;
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final Map<String, Marker> _markers = {};
Future<void> _onMapCreated(GoogleMapController controller) async {
final googleOffices = await locations.getGoogleOffices();
setState(() {
_markers.clear();
for (final office in googleOffices.offices) {
final marker = Marker(
markerId: MarkerId(office.name),
position: LatLng(office.lat, office.lng),
infoWindow: InfoWindow(
title: office.name,
snippet: office.address,
),
);
_markers[office.name] = marker;
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green[700],
),
home: Scaffold(
appBar: AppBar(
title: const Text('Google Office Locations'),
elevation: 2,
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: const CameraPosition(
target: LatLng(0, 0),
zoom: 2,
),
markers: _markers.values.toSet(),
),
),
);
}
}
Dieser Code führt mehrere Vorgänge aus:
- In
_onMapCreatedwird der JSON-Parsing-Code aus dem vorherigen Schritt verwendet.awaiting wird ausgeführt, bis er geladen ist. Anschließend werden die zurückgegebenen Daten verwendet, umMarkers in einemsetState()-Callback zu erstellen. Sobald die App neue Markierungen empfängt, wird mit „setState“ ein Flag für Flutter gesetzt, damit der Bildschirm neu gerendert wird und die Bürostandorte angezeigt werden. - Die Markierungen werden in einem
Mapgespeichert, das demGoogleMap-Widget zugeordnet ist. Dadurch werden die Markierungen mit der richtigen Karte verknüpft. Sie können natürlich mehrere Karten haben und in jeder Karte unterschiedliche Markierungen anzeigen.
Hier ist ein Screenshot von dem, was du erreicht hast. An dieser Stelle können viele interessante Ergänzungen vorgenommen werden. Sie könnten beispielsweise eine Listenansicht der Büros hinzufügen, in der die Karte verschoben und gezoomt wird, wenn der Nutzer auf ein Büro klickt. Wie gesagt, das ist dem Leser überlassen.
6. Nächste Schritte
Glückwunsch!
Sie haben das Codelab abgeschlossen und eine Flutter-App mit einer Google-Karte erstellt. Sie haben auch mit einem JSON-Webdienst interagiert.
Weitere nächste Schritte
In diesem Codelab wird eine Anwendung erstellt, mit der eine Reihe von Punkten auf einer Karte visualisiert werden kann. Es gibt eine Reihe von mobilen Apps, die auf dieser Funktion aufbauen und viele verschiedene Nutzeranforderungen erfüllen. Weitere Ressourcen, die Ihnen dabei helfen können:
- Mobile Apps mit Flutter und Google Maps erstellen (Vortrag auf der Cloud Next ‘19)
- Das
google_maps_webservice-Paket von Hadrien Lejard macht die Verwendung der Google Maps Web Services wie Directions API, Distance Matrix API und Places API sehr einfach. - Wenn Sie sich verschiedene Optionen für die Verwendung einer API über JSON REST ansehen möchten, finden Sie im Medium-Beitrag von Andrew Brogdon eine Reihe von Optionen für die Arbeit mit JSON REST APIs.