Fetch Route and Launch Navigation

Introduction

This example shows:

  1. Fetch route with RouteRequestParams

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

    1. NBNavigation.startNavigation(config)
Android snapshot iOS snapshot

For all code examples, refer to Flutter Navigation Code Example

LaunchNavigation view source

1import 'package:flutter/cupertino.dart';
2import 'package:flutter/material.dart';
3import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
4
5class LaunchNavigation extends StatefulWidget {
6  static const String title = "Route Request and Launch Navigation";
7
8  
9  LaunchNavigationState createState() => LaunchNavigationState();
10}
11
12class LaunchNavigationState extends State<LaunchNavigation> {
13  List<DirectionsRoute> routes = [];
14
15  
16  void initState() {
17    super.initState();
18  }
19
20  
21  Widget build(BuildContext context) {
22    return Scaffold(
23      appBar: AppBar(
24        title: const Text(LaunchNavigation.title),
25      ),
26      body: Padding(
27        padding: const EdgeInsets.all(8.0),
28        child: Column(
29          children: [
30            Row(
31              children: [
32                const Padding(padding: EdgeInsets.only(left: 8)),
33                ElevatedButton(
34                  style: ButtonStyle(
35                    backgroundColor: MaterialStateProperty.all(Colors.blueAccent),
36                  ),
37                  onPressed: () {
38                    _fetchRoute();
39                  },
40                  child: const Text("Fetch Route"),
41                ),
42                const Padding(padding: EdgeInsets.only(left: 8)),
43                ElevatedButton(
44                  style: ButtonStyle(
45                      backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
46                      enableFeedback: routes.isNotEmpty),
47                  onPressed: () {
48                    _startNavigation();
49                  },
50                  child: const Text("Start Navigation"),
51                ),
52              ],
53            ),
54            Padding(
55              padding: const EdgeInsets.all(8),
56              child: Text("route info: ${routes.isEmpty ? "" : routes.first.geometry ?? ""}"),
57            )
58          ],
59        ),
60      ),
61    );
62  }
63
64  void _fetchRoute() async {
65    LatLng origin = LatLng(1.312533169133601, 103.75986708439264);
66    LatLng dest = LatLng( 1.310473772283314, 103.77982271935586);
67
68    RouteRequestParams requestParams = RouteRequestParams(
69      origin: origin,
70      destination: dest,
71      unit: SupportedUnits.imperial,
72      mode: ValidModes.car,
73      geometryType: SupportedGeometry.polyline,
74    );
75
76    await NBNavigation.fetchRoute(requestParams, (routes, error) async {
77      if (routes.isNotEmpty) {
78        setState(() {
79          this.routes = routes;
80        });
81      } else if (error != null) {
82        print("====error====${error}");
83      }
84    });
85  }
86
87  void _startNavigation() {
88    if (routes.isEmpty) return;
89    NavigationLauncherConfig config = NavigationLauncherConfig(route: routes.first, routes: routes);
90    config.locationLayerRenderMode = LocationLayerRenderMode.GPS;
91    config.enableDissolvedRouteLine = false;
92    config.shouldSimulateRoute = true;
93    config.themeMode = NavigationThemeMode.system;
94    config.useCustomNavigationStyle = false;
95    NBNavigation.startNavigation(config);
96  }
97
98  
99  void dispose() {
100    super.dispose();
101  }
102}

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:

  1. 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:

  1. 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.
DIDN'T FIND WHAT YOU LOOKING FOR?