Center coordinates¶
Setup¶
Prerequisites¶
Build and run¶
Go to the center_coordinates
directory,
within the flutter examples directory - that is the name of this example project.
Note - the gem_kit
directory containing the Maps SDK for Flutter
should be in the plugins
directory of the example, e.g.
example_pathname/plugins/gem_kit
- see the environment setup guide above.
Run: flutter pub get
Configure the native parts:
First, verify that the ANDROID_SDK_ROOT
environment variable
is set to the root path of your android SDK.
In android/build.gradle
add the maven
block as shown,
within the allprojects
block, for both debug and release builds:
1 allprojects {
2 repositories {
3 google()
4 mavenCentral()
5 maven {
6 url "${rootDir}/../plugins/gem_kit/android/build"
7 }
8 }
9 }
in android/app/build.gradle
within the android
block, in the defaultConfig
block,
the android SDK version minSdk
must be set as shown below.
Additionally, for release builds, in android/app/build.gradle
,
within the android
block, add the buildTypes
block as shown:
Replace example_pathname
with the actual project pathname
1android {
2 defaultConfig {
3 applicationId "com.magiclane.gem_kit.examples.example_pathname"
4 minSdk 21
5 targetSdk flutter.targetSdk
6 versionCode flutterVersionCode.toInteger()
7 versionName flutterVersionName
8 }
9 buildTypes {
10 release {
11 minifyEnabled false
12 shrinkResources false
13
14 // TODO: Add your own signing config for the release build.
15 // Signing with the debug keys for now, so `flutter run --release` works.
16 signingConfig signingConfigs.debug
17 }
18 }
19}
Then run the project:
flutter run --debug
orflutter run --release
How it works¶
The example app demonstrates the following features:
Center the map on predefined coordinates.
Optionally use an animation to smoothly transition the map view.
1import 'package:gem_kit/core.dart';
2import 'package:gem_kit/map.dart';
3
4import 'package:flutter/material.dart' hide Animation;
5
6Future<void> main() async {
7 const projectApiToken = String.fromEnvironment('GEM_TOKEN');
8
9 await GemKit.initialize(appAuthorization: projectApiToken);
10
11 runApp(const MyApp());
12}
This imports the necessary packages, initializes GemKit, and sets up the main entry point of the app.
UI and Map Integration¶
1class MyApp extends StatelessWidget {
2 const MyApp({super.key});
3
4 @override
5 Widget build(BuildContext context) {
6 return const MaterialApp(
7 debugShowCheckedModeBanner: false,
8 title: 'Center Coordinates',
9 home: MyHomePage(),
10 );
11 }
12}
13
14class MyHomePage extends StatefulWidget {
15 const MyHomePage({super.key});
16
17 @override
18 State<MyHomePage> createState() => _MyHomePageState();
19}
20
21class _MyHomePageState extends State<MyHomePage> {
22 late GemMapController _mapController;
23
24 @override
25 void dispose() {
26 GemKit.release();
27 super.dispose();
28 }
29
30 @override
31 Widget build(BuildContext context) {
32 return Scaffold(
33 appBar: AppBar(
34 backgroundColor: Colors.deepPurple[900],
35 title: const Text('Center Coordinates',
36 style: TextStyle(color: Colors.white)),
37 actions: [
38 IconButton(
39 onPressed: _onCenterCoordinatesButtonPressed,
40 icon: const Icon(
41 Icons.adjust,
42 color: Colors.white,
43 ))
44 ],
45 ),
46 body: GemMap(
47 onMapCreated: _onMapCreated,
48 ),
49 );
50 }
This code sets up the basic structure of the app, including the map and the app bar. It also provides a button in the app bar for centering the map on specific coordinates.
Centering the Map¶
1// The callback for when map is ready to use.
2void _onMapCreated(GemMapController controller) async {
3 // Save controller for further usage.
4 _mapController = controller;
5}
6
7void _onCenterCoordinatesButtonPressed() {
8 // Predefined coordinates for Rome, Italy.
9 final targetCoordinates =
10 Coordinates(latitude: 41.902782, longitude: 12.496366);
11
12 // Create an animation (optional).
13 final animation = GemAnimation(type: AnimationType.linear);
14
15 // Use the map controller to center on coordinates.
16 _mapController.centerOnCoordinates(targetCoordinates, animation: animation);
17}
This code handles centering the map on the predefined coordinates for Rome, Italy. The GemMapController
is used to perform this action, and an optional animation is provided for a smooth transition.