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 snapshot	iOS snapshot

For all code examples, refer to Flutter Navigation Code Example

LaunchNavigation view source

1
import 'package:flutter/foundation.dart';
2
import 'package:flutter/material.dart';
3
import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
4

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

8
  const LaunchNavigation({super.key});
9

10
  @override
11
  LaunchNavigationState createState() => LaunchNavigationState();
12
}
13

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

17
  @override
18
  void initState() {
19
    super.initState();
20
  }
21

22
  @override
23
  Widget build(BuildContext context) {
24
    return Scaffold(
25
      appBar: AppBar(
26
        title: const Text(LaunchNavigation.title),
27
      ),
28
      body: Padding(
29
        padding: const EdgeInsets.all(8.0),
30
        child: Column(
31
          children: [
32
            Row(
33
              children: [
34
                const Padding(padding: EdgeInsets.only(left: 8)),
35
                ElevatedButton(
36
                  style: ButtonStyle(
37
                    backgroundColor: WidgetStateProperty.all(Colors.blueAccent),
38
                  ),
39
                  onPressed: () {
40
                    _fetchRoute();
41
                  },
42
                  child: const Text("Fetch Route"),
43
                ),
44
                const Padding(padding: EdgeInsets.only(left: 8)),
45
                ElevatedButton(
46
                  style: ButtonStyle(
47
                      backgroundColor: WidgetStateProperty.all(
48
                          routes.isEmpty ? Colors.grey : Colors.blueAccent),
49
                      enableFeedback: routes.isNotEmpty),
50
                  onPressed: () {
51
                    _startNavigation();
52
                  },
53
                  child: const Text("Start Navigation"),
54
                ),
55
              ],
56
            ),
57
            Padding(
58
              padding: const EdgeInsets.all(8),
59
              child: Text(
60
                  "route info: ${routes.isEmpty ? "" : routes.first.geometry ?? ""}"),
61
            )
62
          ],
63
        ),
64
      ),
65
    );
66
  }
67

68
  void _fetchRoute() async {
69
    LatLng origin = const LatLng(1.312533169133601, 103.75986708439264);
70
    LatLng dest = const LatLng(1.310473772283314, 103.77982271935586);
71

72
    RouteRequestParams requestParams = RouteRequestParams(
73
      origin: origin,
74
      destination: dest,
75
      // waypoints: [Coordinate(latitude: wayP2.latitude, longitude: wayP2.longitude)],
76
      // overview: ValidOverview.simplified,
77
      // avoid: [SupportedAvoid.toll, SupportedAvoid.ferry],
78
      // option: SupportedOption.flexible,
79
      // truckSize: [200, 200, 600],
80
      // truckWeight: 100,
81
      // unit: SupportedUnits.imperial,
82
      mode: ValidModes.car,
83
    );
84

85
    DirectionsRouteResponse routeResponse =
86
        await NBNavigation.fetchRoute(requestParams);
87
    if (routeResponse.directionsRoutes.isNotEmpty) {
88
      setState(() {
89
        routes = routeResponse.directionsRoutes;
90
      });
91
    } else if (routeResponse.message != null) {
92
      if (kDebugMode) {
93
        print(
94
            "====error====${routeResponse.message}===${routeResponse.errorCode}");
95
      }
96
    }
97
  }
98

99
  void _startNavigation() {
100
    if (routes.isEmpty) return;
101
    NavigationLauncherConfig config =
102
        NavigationLauncherConfig(route: routes.first, routes: routes);
103
    config.locationLayerRenderMode = LocationLayerRenderMode.gps;
104
    config.shouldSimulateRoute = true;
105
    config.themeMode = NavigationThemeMode.system;
106
    config.useCustomNavigationStyle = false;
107
    NBNavigation.startNavigation(config);
108
  }
109

110
  @override
111
  void dispose() {
112
    // TODO: implement dispose
113
    super.dispose();
114
  }
115

116
  @override
117
  void didUpdateWidget(LaunchNavigation oldWidget) {
118
    // TODO: implement didUpdateWidget
119
    super.didUpdateWidget(oldWidget);
120
  }
121

122
  @override
123
  void didChangeDependencies() {
124
    // TODO: implement didChangeDependencies
125
    super.didChangeDependencies();
126
  }
127
}
128

129

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.

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.

Fetch Route and Launch Navigation

Introduction

Code summary

Fetch route with RouteRequestParams:

Start Navigation with LauncherConfig: