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)
documentation imagedocumentation image
Android snapshotiOS 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.

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.

© 2024 NextBillion.ai all rights reserved.