Navigation Theme Mode
Introduction
This example shows
- Fetch routes using RouteRequestParams
- Customize Navigation theme mode by setting themeMode in NavigationLauncherConfig
- NavigationThemeMode.system: following system mode
- NavigationThemeMode.light: Navigating in light mode
- NavigationThemeMode.dark: Navigating in dark mode
Android snapshot iOS snapshot
 |  |
| Android snapshot | iOS snapshot |
For all code examples, refer to Flutter Navigation Code Example
NavigationTheme view source
1import 'package:flutter/material.dart';
2import 'package:nb_maps_flutter/nb_maps_flutter.dart';
3import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
4
5class NavigationTheme extends StatefulWidget {
6 static const String title = "Navigation Theme Mode";
7
8
9 NavigationThemeState createState() => new NavigationThemeState();
10}
11
12class NavigationThemeState extends State<NavigationTheme> {
13 NextbillionMapController? controller;
14 List<DirectionsRoute> routes = [];
15 late NavNextBillionMap navNextBillionMap;
16 NavigationThemeMode themeMode = NavigationThemeMode.system;
17
18 LatLng origin = LatLng( 1.312533169133601, 103.75986708439264);
19 LatLng dest = LatLng( 1.310473772283314, 103.77982271935586);
20
21 void _onMapCreated(NextbillionMapController controller) {
22 this.controller = controller;
23 }
24
25 void _onStyleLoaded() {
26 if (controller != null) {
27 navNextBillionMap = NavNextBillionMap(controller!);
28 }
29 }
30
31
32 void initState() {
33 super.initState();
34 }
35
36
37 Widget build(BuildContext context) {
38 var screenHeight = MediaQuery.of(context).size.height;
39
40 return Scaffold(
41 appBar: AppBar(
42 title: const Text(NavigationTheme.title),
43 ),
44 body: SingleChildScrollView(
45 child: Column(
46 children: [
47 Container(
48 constraints: BoxConstraints(maxHeight: screenHeight * 0.6),
49 child: NBMap(
50 onMapCreated: _onMapCreated,
51 initialCameraPosition: CameraPosition(
52 target: LatLng(origin.latitude, 103.76986708439264),
53 zoom: 13.0,
54 ),
55 onStyleLoadedCallback: _onStyleLoaded,
56 ),
57 ),
58 _buttonWidget(),
59 ],
60 ),
61 ),
62 );
63 }
64
65 void _fetchRoute() async {
66 RouteRequestParams requestParams = RouteRequestParams(
67 origin: origin,
68 destination: dest,
69 mode: ValidModes.car,
70 geometryType: SupportedGeometry.polyline,
71 );
72
73 await NBNavigation.fetchRoute(requestParams, (routes, error) async {
74 if (routes.isNotEmpty) {
75 setState(() {
76 this.routes = routes;
77 });
78 drawRoutes(routes);
79 } else if (error != null) {
80 print("====error====${error}");
81 }
82 });
83 }
84
85 void _startNavigation() {
86 if (routes.isEmpty) return;
87 NavigationLauncherConfig config = NavigationLauncherConfig(route: routes.first, routes: routes);
88 config.locationLayerRenderMode = LocationLayerRenderMode.GPS;
89 config.enableDissolvedRouteLine = false;
90 config.shouldSimulateRoute = true;
91 config.themeMode = themeMode;
92 config.useCustomNavigationStyle = false;
93 NBNavigation.startNavigation(config);
94 }
95
96 Future<void> drawRoutes(List<DirectionsRoute> routes) async {
97 navNextBillionMap.clearRoute();
98 await navNextBillionMap.drawRoute(routes);
99 }
100
101
102 void dispose() {
103 super.dispose();
104 }
105
106 _buttonWidget() {
107 return Padding(
108 padding: const EdgeInsets.only(left: 8, top: 18.0),
109 child: Column(
110 children: [
111 ElevatedButton(
112 style: ButtonStyle(
113 backgroundColor: MaterialStateProperty.all(Colors.blueAccent),
114 ),
115 onPressed: () {
116 _fetchRoute();
117 },
118 child: const Text("Fetch Route"),
119 ),
120 ElevatedButton(
121 style: ButtonStyle(
122 backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
123 enableFeedback: routes.isNotEmpty),
124 onPressed: () {
125 themeMode = NavigationThemeMode.light;
126 _startNavigation();
127 },
128 child: const Text("Start Navigation with light mode"),
129 ),
130 ElevatedButton(
131 style: ButtonStyle(
132 backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
133 enableFeedback: routes.isNotEmpty),
134 onPressed: () {
135 themeMode = NavigationThemeMode.dark;
136 _startNavigation();
137 },
138 child: const Text("Start Navigation with dark mode"),
139 ),
140 ElevatedButton(
141 style: ButtonStyle(
142 backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
143 enableFeedback: routes.isNotEmpty),
144 onPressed: () {
145 themeMode = NavigationThemeMode.system;
146 _startNavigation();
147 },
148 child: const Text("Start Navigation with following system mode"),
149 ),
150 ],
151 ),
152 );
153 }
154
155}Code summary
The above code snippet defines a StatefulWidget named NavigationTheme, which demonstrates a simple navigation application using the NextbillionMap SDK for maps and the NBNavigation SDK for navigation features. The app allows users to fetch routes and start navigation with different theme modes (light, dark, or system default).
Initialization and Map Display:
The NBMap widget is used to display the map on the screen. The _onMapCreated method is called when the map is created and initializes the NextbillionMapController. The _onStyleLoaded method is called when the map style is loaded and creates a NavNextBillionMap instance using the NextbillionMapController.
Fetching Routes:
The _fetchRoute method is responsible for fetching routes between two coordinates (origin and dest) using the NBNavigation.fetchRoute function. The fetched routes are stored in the routes variable. The routes are drawn on the map using the drawRoutes method.
Starting Navigation:
The _startNavigation method is triggered when the user presses one of the navigation mode buttons. It creates a NavigationLauncherConfig object with the selected route and navigation settings. The navigation is started using the NBNavigation.startNavigation function with the specified config.
Explanation of Navigation Theme Mode Customization:
The navigation theme mode can be customized using the NavigationThemeMode enum. It has the following options:
- NavigationThemeMode.light: Starts navigation with a light theme.
- NavigationThemeMode.dark: Starts navigation with a dark theme.
- NavigationThemeMode.system: Starts navigation with the system default theme.
When the user presses one of the navigation mode buttons, the _startNavigation method is called with the selected theme mode, and navigation is started accordingly.
The user presses the "Fetch Route" button to fetch the routes between the specified origin and destination coordinates.
After fetching the routes, the user can press one of the navigation mode buttons ("Start Navigation with light mode", "Start Navigation with dark mode", "Start Navigation with following system mode") to start navigation with the selected theme mode.
