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)
docs-imagedocs-image
Android snapshotiOS snapshot

For all code examples, refer to Flutter Navigation Code Example

LaunchNavigation view source

1import 'package:flutter/foundation.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 const LaunchNavigation({super.key});
9
10
11 LaunchNavigationState createState() => LaunchNavigationState();
12}
13
14class LaunchNavigationState extends State<LaunchNavigation> {
15 List<DirectionsRoute> routes = [];
16
17
18 void initState() {
19 super.initState();
20 }
21
22
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
111 void dispose() {
112 // TODO: implement dispose
113 super.dispose();
114 }
115
116
117 void didUpdateWidget(LaunchNavigation oldWidget) {
118 // TODO: implement didUpdateWidget
119 super.didUpdateWidget(oldWidget);
120 }
121
122
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.