Speed Watcher

In this guide, you will learn how to monitor speed using an interactive map, calculate a route based on GPS data, and visualize navigation instructions.

Setup

First, get an API key token, see the Getting Started guide.

Prerequisites

Make sure you completed the Environment Setup - Flutter Examples guide before starting this guide.

Build and run

Go to the speed_watcher 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. Replace example_pathname with the actual example path name, such as address_search

Download project dependencies:

flutter upgrade

run the following terminal commands in the project directory, where the pubspec.yaml file is located:

flutter clean

flutter pub get

Run the example:

Android

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, without the line numbers, those are for reference:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
           url "${rootDir}/../plugins/gem_kit/android/build"
        }
    }
}

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 example pathname, such as center_coordinates

android {
    defaultConfig {
        applicationId "com.magiclane.gem_kit.examples.example_pathname"
        minSdk 21
        targetSdk flutter.targetSdk
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    buildTypes {
        release {
            minifyEnabled false
            shrinkResources false

            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

Then run the project:

flutter run --debug

or

flutter run --release

iOS

In the ios/Podfile configuration text file, at the top, set the minimum ios platform to 13 like this:

platform :ios, '13.0'

Then run the project:

flutter run --debug

or

flutter run --release

How it works

import 'package:gem_kit/core.dart';
import 'package:gem_kit/map.dart';
import 'package:gem_kit/navigation.dart';
import 'package:gem_kit/routing.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  const projectApiToken = String.fromEnvironment('GEM_TOKEN');
  await GemKit.initialize(appAuthorization: projectApiToken);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Speed Watcher',
      home: MyHomePage(),
    );
  }
}

The Dart material package is imported, along with the required gem_kit packages. The map is rendered within a widget that serves as the root of the application.

void _onMapCreated(GemMapController controller) {
  _mapController = controller; // Save controller for further usage
}

This callback function is triggered when the interactive map is initialized and ready to use.

void _onBuildRouteButtonPressed(BuildContext context) {
  final departureLandmark = Landmark.withLatLng(latitude: 41.898499, longitude: 12.526655);
  final destinationLandmark = Landmark.withLatLng(latitude: 41.891037, longitude: 12.492692);
  final routePreferences = RoutePreferences();
  _showSnackBar(context, message: 'The route is calculating.');

  RoutingService.calculateRoute(
    [departureLandmark, destinationLandmark], routePreferences,
    (err, routes) {
      ScaffoldMessenger.of(context).clearSnackBars();

      if (err == GemError.success) {
        final routesMap = _mapController.preferences.routes;

        for (final route in routes!) {
          routesMap.add(route, route == routes.first, label: route.getMapLabel());
        }

        _mapController.centerOnRoutes(routes); // Center camera on routes
      }
    },
  );
}

This function is called when the “Build Route” button is pressed. It defines the departure and destination landmarks, calculates the route, and displays it on the map.

void _startSimulation() {
  final routes = _mapController.preferences.routes;

  _navigationHandler = NavigationService.startSimulation(routes.mainRoute, (type, instruction) {
    if (type == NavigationEventType.destinationReached || type == NavigationEventType.error) {
      setState(() {
        _isSimulationActive = false;
        _cancelRoute();
      });
      return;
    }
    _isSimulationActive = true;

    if (instruction != null) {
      setState(() => currentInstruction = instruction);
    }
  });

  _mapController.startFollowingPosition(); // Follow position during navigation
}

This method initiates the navigation simulation, allowing users to monitor their speed in real-time as they navigate along the route.

Flutter Examples

Maps SDK for Flutter Examples can be downloaded or cloned with Git