Lane Instruction

This example demonstrates how to build a Flutter app that calculates routes and displays lane instructions using the ``gem_kit``package.

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

Navigate to the project folder for this example to build and run the application.

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:

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:

:lineno-start: 1

    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 project pathname

:lineno-start: 1

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
        }
    }
}

iOS

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

platform :ios, '14.0'

We recommend you to run these commands after you copy the gem_kit into your project: |flutter clean |flutter pub get |and |cd ios |pod install

Then run the project:

flutter run --debug

or

flutter run --release

App entry and initialization

const projectApiToken = String.fromEnvironment('GEM_TOKEN');

void main() {
  runApp(const MyApp());
}

This code initializes the projectApiToken with the required authorization token and launches the app.

How it works

This example app includes the following features:

• Initializes GemKit and calculates a route between landmarks.

• Allows users to simulate navigation along the calculated route.

• Displays lane instructions with real-time lane guidance.

Route Calculation and Simulation

The calculateRoute method calculates a route between two landmarks and displays it on the map.

void _onBuildRouteButtonPressed(BuildContext context) {
  final departureLandmark = Landmark.withLatLng(latitude: 45.649572, longitude: 25.628333);
  final destinationLandmark = Landmark.withLatLng(latitude: 44.4379187, longitude: 26.0122374);

  final routePreferences = RoutePreferences();
  _routingHandler = RoutingService.calculateRoute(
    [departureLandmark, destinationLandmark], routePreferences,
    (err, routes) {
      if (err == GemError.success && routes != null) {
        final routesMap = _mapController.preferences.routes;
        routes.forEach((route) => routesMap.add(route, route == routes.first));
        _mapController.centerOnRoutes(routes: routes);
        setState(() => _areRoutesBuilt = true);
      }
    });
}

Navigation Simulation

The startSimulation method triggers a simulated navigation session, updating the UI with lane instructions.

void _startSimulation() {
  _navigationHandler = NavigationService.startSimulation(
    _mapController.preferences.routes.mainRoute,
    (type, instruction) {
      if (type == NavigationEventType.destinationReached) {
        setState(() => _isSimulationActive = false);
      }
      if (instruction != null) {
        setState(() => currentInstruction = instruction);
      }
    });
  _mapController.startFollowingPosition();
}

UI Components

• Lane Instruction Display: Shows current lane instructions with getLaneImage based on the navigation data.

Align(
  alignment: Alignment.bottomCenter,
  child: Padding(
    padding: EdgeInsets.only(
      bottom: MediaQuery.of(context).padding.bottom + 40),
    child: Image.memory(currentInstruction.getLaneImage(
      size: Size(100, 50),
      renderSettings: LaneImageRenderSettings(
        backgroundColor: Colors.white,
        activeColor: Colors.green,
        inactiveColor: Colors.black))));

Flutter Examples

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