• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Fetch Route and Launch Navigation

Introduction

This example shows:

  • Fetch route with RouteRequestParams

    • NBNavigation.fetchRoute(requestParams, (routes, error) async
  • Start Navigation with LauncherConfig

    • NBNavigation.startNavigation(config)
Android snapshotiOS snapshot

For all code examples, refer to Flutter Navigation Code Example

LaunchNavigation view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';

class LaunchNavigation extends StatefulWidget {
  static const String title = "Route Request and Launch Navigation";

  @override
  LaunchNavigationState createState() => LaunchNavigationState();
}

class LaunchNavigationState extends State<LaunchNavigation> {
  List<DirectionsRoute> routes = [];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(LaunchNavigation.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Row(
              children: [
                const Padding(padding: EdgeInsets.only(left: 8)),
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.blueAccent),
                  ),
                  onPressed: () {
                    _fetchRoute();
                  },
                  child: const Text("Fetch Route"),
                ),
                const Padding(padding: EdgeInsets.only(left: 8)),
                ElevatedButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
                      enableFeedback: routes.isNotEmpty),
                  onPressed: () {
                    _startNavigation();
                  },
                  child: const Text("Start Navigation"),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(8),
              child: Text("route info: ${routes.isEmpty ? "" : routes.first.geometry ?? ""}"),
            )
          ],
        ),
      ),
    );
  }

  void _fetchRoute() async {
    LatLng origin = LatLng(1.312533169133601, 103.75986708439264);
    LatLng dest = LatLng( 1.310473772283314, 103.77982271935586);

    RouteRequestParams requestParams = RouteRequestParams(
      origin: origin,
      destination: dest,
      unit: SupportedUnits.imperial,
      mode: ValidModes.car,
      geometryType: SupportedGeometry.polyline,
    );

    await NBNavigation.fetchRoute(requestParams, (routes, error) async {
      if (routes.isNotEmpty) {
        setState(() {
          this.routes = routes;
        });
      } else if (error != null) {
        print("====error====${error}");
      }
    });
  }

  void _startNavigation() {
    if (routes.isEmpty) return;
    NavigationLauncherConfig config = NavigationLauncherConfig(route: routes.first, routes: routes);
    config.locationLayerRenderMode = LocationLayerRenderMode.GPS;
    config.enableDissolvedRouteLine = false;
    config.shouldSimulateRoute = true;
    config.themeMode = NavigationThemeMode.system;
    config.useCustomNavigationStyle = false;
    NBNavigation.startNavigation(config);
  }

  @override
  void dispose() {
    super.dispose();
  }
}

Code summary

The above code snippet demonstrates how to fetch a route using the "nb_navigation_flutter" package and how to start navigation with the provided route using the "NavigationLauncherConfig". The user interface consists of two buttons: "Fetch Route" and "Start Navigation". The "Fetch Route" button fetches a route between two specified coordinates, and the "Start Navigation" button launches navigation with the fetched route.

Fetch route with RouteRequestParams:

  • The "_fetchRoute" method is responsible for fetching the route. It creates a "RouteRequestParams" object with origin and destination coordinates and other route parameters. The "NBNavigation.fetchRoute" method is then called with these parameters to retrieve the route. If successful, the fetched route is stored in the "routes" list.

Start Navigation with LauncherConfig:

  • The "_startNavigation" method initiates the navigation. It creates a "NavigationLauncherConfig" object with the fetched route and other configuration options like location rendering mode, dissolved route line, simulation mode, theme mode, and custom navigation style. The "NBNavigation.startNavigation" method is called with this configuration to start the navigation.