1. Giriş
Flutter, iOS ve Android'de rekor sürede yüksek kaliteli yerel deneyimler oluşturmaya yönelik Google'ın mobil uygulama SDK'sıdır.
Google Haritalar Flutter eklentisi ile, uygulamanıza Google harita verilerine dayalı haritalar ekleyebilirsiniz. Eklenti, Google Haritalar sunucularına erişimi, harita görüntülemeyi ve tıklama ve sürükleme gibi kullanıcı hareketlerine verilen yanıtları otomatik olarak yönetir. Haritanıza işaretçi de ekleyebilirsiniz. Bu nesneler, haritadaki konumlar için ek bilgiler sağlar ve kullanıcının haritayla etkileşime girmesine olanak tanır.
Oluşturacaklarınız
Bu codelab'de, Flutter SDK'sını kullanarak Google Haritası içeren bir mobil uygulama geliştireceksiniz. Uygulamanız şunları yapabilecek:
|
|
Flutter nedir?
Flutter'ın üç temel özelliği vardır.
- Hızlı geliştirme: Durum Bilgili Hot Yenile ile Android ve iOS uygulamalarınızı milisaniyeler içinde oluşturun.
- Etkileyici ve esnek: Yerel son kullanıcı deneyimlerine odaklanarak özellikleri hızlı bir şekilde gönderin.
- Hem iOS hem de Android'de yerel performans: Flutter'ın widget'ları, tam yerel performans sağlamak için kaydırma, gezinme, simgeler ve yazı tipleri gibi tüm kritik platform farklılıklarını içerir.
Google Haritalar şunları içerir:
- Dünyanın% 99'unu kapsıyor: 200'den fazla ülke ve bölgeye ait güvenilir, kapsamlı verilerle çözüm derleyin.
- Günlük 25 milyon güncelleme: Doğru ve gerçek zamanlı konum bilgisine güvenin.
- Aylık 1 milyar etkin kullanıcı: Google Haritalar'ın desteğiyle güvenle ölçeklendirin geliştirmenin harika bir yoludur.
Bu codelab'de hem iOS hem de Android için bir Flutter uygulamasında Google Haritalar deneyimi oluşturma adımları açıklanmaktadır.
Neler öğreneceksiniz?
- Yeni Flutter uygulaması nasıl oluşturulur?
- Google Haritalar Flutter eklentisi nasıl yapılandırılır?
- Bir web hizmetinden alınan konum verilerini kullanarak haritaya İşaretçi ekleme.
Bu codelab, Flutter uygulamalarına Google haritası eklemeye odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları üzerine yazılır ve kolayca kopyalayıp yapıştırmanız için sunulur.
Bu codelab'den ne öğrenmek istersiniz?
2. Flutter ortamınızı ayarlama
Bu laboratuvarı tamamlamak için iki yazılıma ihtiyacınız vardır: Flutter SDK ve düzenleyici. Bu codelab'de Android Studio varsayılmaktadır. Ancak tercih ettiğiniz düzenleyiciyi kullanabilirsiniz.
Bu codelab'i aşağıdaki cihazlardan herhangi birini kullanarak çalıştırabilirsiniz:
- Bilgisayarınıza bağlı ve geliştirici moduna ayarlanmış fiziksel bir cihaz (Android veya iOS).
- iOS simülatörü. (Xcode araçlarının yüklenmesini gerektirir.)
- Android emülatörü. (Android Studio'da kurulum gerektirir.)
3. Başlarken
Flutter'ı kullanmaya başlama
Flutter'ı kullanmaya başlamanın en kolay yolu, basit bir başlangıç deneyimi için gerekli tüm kodu oluşturmak üzere flutter komut satırı aracını kullanmaktır.
$ 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.
Bağımlılık olarak Google Haritalar Flutter eklentisi ekleme
Pub paketlerini kullanarak Flutter uygulamasına yeni özellikler eklemek kolaydır. Bu codelab'de proje dizininden aşağıdaki komutu çalıştırarak Google Haritalar Flutter eklentisini tanıtacaksınız.
$ 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'i platform yapılandırma
iOS'te Google Haritalar SDK'sının son sürümünü edinmek için platformda minimum iOS 14 sürümü olması gerekir. ios/Podfile yapılandırma dosyasının üst kısmını aşağıdaki gibi değiştirin.
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'i minSDK yapılandırma
Google Haritalar SDK'sını Android'de kullanmak için minSdk değerinin 21 olarak ayarlanması gerekir. android/app/build.gradle yapılandırma dosyasını aşağıdaki gibi değiştirin.
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. Uygulamaya Google Haritalar'ı ekleme
Her şey API anahtarlarıyla ilgilidir
Flutter uygulamanızda Google Haritalar'ı kullanmak için, Google Haritalar Platformu ile bir API projesi yapılandırmanız gerekir. Ardından, Android'in API anahtarını kullanan Haritalar SDK'sı, iOS için Haritalar SDK'sı API anahtarı kullanma ve Haritalar JavaScript API'sinin API anahtarı kullanma. API anahtarları yanınızdayken hem Android hem de iOS uygulamalarını yapılandırmak için aşağıdaki adımları uygulayın.
Android uygulaması için API anahtarı ekleme
Android uygulamasına API anahtarı eklemek için android/app/src/main klasöründeki AndroidManifest.xml dosyasını düzenleyin. Önceki adımda oluşturulan API anahtarını içeren application düğümündeki tek bir meta-data girişi ekleyin.
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>
iOS uygulaması için API anahtarı ekleme
iOS uygulamasına API anahtarı eklemek için ios/Runner klasöründeki AppDelegate.swift dosyasını düzenleyin. iOS'te API anahtarı eklemek, Android'in aksine Runner uygulamasının kaynak kodunda değişiklik yapılmasını gerektirir. AppDelegate, uygulama ilk kullanıma hazırlama işleminin bir parçası olan temel tekil bileşendir.
Bu dosyada iki değişiklik yapın. Öncelikle, Google Haritalar başlıklarını almak için bir #import ifadesi ekleyin, ardından GMSServices single'ının provideAPIKey() yöntemini çağırın. Bu API anahtarı, Google Haritalar'ın harita parçalarını doğru şekilde yayınlamasını sağlar.
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)
}
}
Web uygulaması için API anahtarı ekleme
Web uygulamasına API anahtarı eklemek için web klasöründeki index.html dosyasını düzenleyin. Başlık bölümüne, API anahtarınızla Haritalar JavaScript komut dosyasına bir referans ekleyin.
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>
Ekrana harita yerleştirme
Şimdi ekrandan haritayı alma zamanı. lib/main.dart içeriğini aşağıdakiyle değiştirin.
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,
),
),
),
);
}
}
Uygulamayı çalıştırma
iOS veya Android'de Flutter uygulamasını çalıştırarak Portland merkezli tek bir harita görünümü görün. Alternatif olarak bir Android emülatörü veya iOS simülatörü çalıştırın. Harita merkezini kendi yaşadığınız şehri veya sizin için önemli olan bir yeri temsil edecek şekilde değiştirebilirsiniz.
$ flutter run
|
|
5. Google'ı Harita'ya taşıyın
Google'ın dünya genelinde Kuzey Amerika, Latin Amerika, Avrupa, Asya Pasifik'ten Afrika ve Orta Doğu. Bu haritaların olumlu yanı, ofis konumu bilgilerini JSON biçiminde sağlamak için kolayca kullanılabilen bir API uç noktasına sahip olmalarıdır. Bu adımda, bu ofis yerlerini haritaya yerleştirirsiniz. Bu adımda, JSON'u ayrıştırmak için kod oluşturma işlemini kullanacaksınız.
Aşağıdaki gibi projeye üç yeni Flutter bağımlılığı ekleyin. HTTP isteklerini kolayca yapmak için http paketini, JSON belgelerini temsil eden nesne yapısını açıklamak için json_serializable ve json_annotation öğelerini, kod oluşturma desteği için build_runner kodunu ekleyin.
$ 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.
Kod oluşturma ile JSON'u ayrıştırma
API uç noktasından döndürülen JSON verilerinin normal bir yapıya sahip olduğunu fark etmiş olabilirsiniz. Bu verileri, kodda kullanabileceğiniz nesnelere dönüştürmek için kod oluşturmak yararlı olacaktır.
lib/src dizininde bir locations.dart dosyası oluşturun ve döndürülen JSON verilerinin yapısını aşağıdaki gibi açıklayın:
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>,
);
}
Bu kodu ekledikten sonra, IDE'niz (kullanıyorsanız) var olmayan bir eşdüzey dosyaya referans verdiğinden locations.g.dart. Bu oluşturulan dosya, yazılmamış JSON yapıları ve adlandırılmış nesneler arasında dönüşüm gerçekleştirir. Aşağıdaki şekilde build_runner komutunu çalıştırarak oluşturun:
$ 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)
Kodunuz artık temiz bir şekilde tekrar analiz edilmelidir. Sonra, getGoogleOffices işlevinde kullanılan yedek locations.json dosyasını eklememiz gerekir. Bu yedeğin dahil edilmesinin nedenlerinden biri, bu işleve yüklenen statik verilerin CORS başlıkları olmadan sunulması, dolayısıyla web tarayıcısına yüklenememesidir. Android ve iOS Flutter uygulamalarının CORS başlıklarına ihtiyacı yoktur, ancak mobil veri erişimi çoğu zaman hassas olabilir.
Tarayıcınızda https://about.google/static/data/locations.json adresine gidin ve içeriği öğe dizinine kaydedin. Alternatif olarak, komut satırını aşağıdaki gibi kullanabilirsiniz.
$ 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
Öğe dosyanızı indirdiğinize göre onu pubspec.yaml dosyanızın flutter bölümüne ekleyin.
pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/locations.json
Harita verilerini istemek için main.dart dosyasını değiştirin ve döndürülen bilgileri kullanarak haritaya ofis ekleyin:
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(),
),
),
);
}
}
Bu kod birkaç işlem gerçekleştirir:
_onMapCreatedürününde, önceki adımdaki JSON ayrıştırma kodunu, yüklenene kadarawaitkullanır. Daha sonra, döndürülen verileri kullanaraksetState()geri çağırması içindeMarkeroluşturur. Uygulama yeni işaretçiler aldıktan sonra setState, ekranı yeniden boyaması için Flutter'ı işaretler ve ofis konumlarının gösterilmesine neden olur.- İşaretçiler,
GoogleMapwidget'ıyla ilişkilendirilmiş birMapiçinde depolanır. Bu işlem, işaretçileri doğru haritaya bağlar. Elbette birden fazla haritanız olabilir ve her birinde farklı işaretçiler görüntüleyebilirsiniz.
Yaptıklarınızın ekran görüntüsünü burada bulabilirsiniz. Bu noktada yapılabilecek pek çok ilginç ekleme var. Örneğin, kullanıcı bir ofisi tıkladığında haritayı hareket ettiren ve yakınlaştıran ofisler için bir liste görünümü ekleyebilirsiniz, ancak söyledikleri gibi, bu alıştırma okuyucuya bırakılacaktır!
6. Sonraki adımlar
Tebrikler!
Codelab'i tamamladınız ve Google Haritası ile bir Flutter uygulaması oluşturdunuz. Ayrıca bir JSON Web Hizmeti ile etkileşimde bulundunuz.
Sonraki diğer adımlar
Bu codelab'de, bazı noktaları harita üzerinde görselleştirmek için geliştirilmiş bir deneyim sunulmaktadır. Birçok farklı kullanıcı ihtiyacını karşılamak için bu özelliği temel alan çeşitli mobil uygulamalar vardır. Bu konuda size yardımcı olabilecek başka kaynaklar da mevcuttur:
- Flutter ve Google Haritalar ile Mobil Uygulamalar Derleme (Cloud Next '19'da bir konuşma)
- Hadrien Lejard'ın Yol Tarifi API'si, Mesafe Matrisi API'si ve Places API gibi Google Haritalar Web Hizmetleri'ni kullanmak gerçekten kolay.
google_maps_webservice - JSON REST üzerinden API kullanmayla ilgili farklı seçenekleri görmek istiyorsanız JSON REST API'leriyle çalışmaya yönelik çeşitli seçenekler için Andrew Brogdon'un Medium yayınına göz atın.