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

For all code examples, refer to Flutter Navigation Code Example

NavigationTheme 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 NavigationTheme extends StatefulWidget {
6
  static const String title = "Navigation Theme Mode";
7

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

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

14
class NavigationThemeState extends State<NavigationTheme> {
15
  NextbillionMapController? controller;
16
  List<DirectionsRoute> routes = [];
17
  late NavNextBillionMap navNextBillionMap;
18
  NavigationThemeMode themeMode = NavigationThemeMode.system;
19

20
  LatLng origin = const LatLng(1.312533169133601, 103.75986708439264);
21
  LatLng dest = const LatLng(1.310473772283314, 103.77982271935586);
22

23
  void _onMapCreated(NextbillionMapController controller) {
24
    this.controller = controller;
25
  }
26

27
  void _onStyleLoaded() async {
28
    if (controller != null) {
29
      navNextBillionMap = await NavNextBillionMap.create(controller!);
30
    }
31
  }
32

33
  @override
34
  void initState() {
35
    super.initState();
36
  }
37

38
  @override
39
  Widget build(BuildContext context) {
40
    var screenHeight = MediaQuery.of(context).size.height;
41

42
    return Scaffold(
43
      appBar: AppBar(
44
        title: const Text(NavigationTheme.title),
45
      ),
46
      body: SingleChildScrollView(
47
        child: Column(
48
          children: [
49
            Container(
50
              constraints: BoxConstraints(maxHeight: screenHeight * 0.6),
51
              child: NBMap(
52
                onMapCreated: _onMapCreated,
53
                initialCameraPosition: CameraPosition(
54
                  target: LatLng(origin.latitude, 103.76986708439264),
55
                  zoom: 13.0,
56
                ),
57
                onStyleLoadedCallback: _onStyleLoaded,
58
              ),
59
            ),
60
            _buttonWidget(),
61
          ],
62
        ),
63
      ),
64
    );
65
  }
66

67
  void _fetchRoute() async {
68
    RouteRequestParams requestParams = RouteRequestParams(
69
      origin: origin,
70
      destination: dest,
71
      // waypoints: [Coordinate(latitude: wayP2.latitude, longitude: wayP2.longitude)],
72
      // overview: ValidOverview.simplified,
73
      // avoid: [SupportedAvoid.toll, SupportedAvoid.ferry],
74
      // option: SupportedOption.flexible,
75
      // truckSize: [200, 200, 600],
76
      // truckWeight: 100,
77
      // unit: SupportedUnits.imperial,
78
      mode: ValidModes.car,
79
    );
80

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

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

107
  Future<void> drawRoutes(List<DirectionsRoute> routes) async {
108
    navNextBillionMap.clearRoute();
109
    navNextBillionMap.drawRoute(routes);
110
  }
111

112
  @override
113
  void dispose() {
114
    super.dispose();
115
  }
116

117
  _buttonWidget() {
118
    return Padding(
119
      padding: const EdgeInsets.only(left: 8, top: 18.0),
120
      child: Column(
121
        children: [
122
          ElevatedButton(
123
            style: ButtonStyle(
124
              backgroundColor: WidgetStateProperty.all(Colors.blueAccent),
125
            ),
126
            onPressed: () {
127
              _fetchRoute();
128
            },
129
            child: const Text("Fetch Route"),
130
          ),
131
          ElevatedButton(
132
            style: ButtonStyle(
133
                backgroundColor: WidgetStateProperty.all(
134
                    routes.isEmpty ? Colors.grey : Colors.blueAccent),
135
                enableFeedback: routes.isNotEmpty),
136
            onPressed: () {
137
              themeMode = NavigationThemeMode.light;
138
              _startNavigation();
139
            },
140
            child: const Text("Start Navigation with light mode"),
141
          ),
142
          ElevatedButton(
143
            style: ButtonStyle(
144
                backgroundColor: WidgetStateProperty.all(
145
                    routes.isEmpty ? Colors.grey : Colors.blueAccent),
146
                enableFeedback: routes.isNotEmpty),
147
            onPressed: () {
148
              themeMode = NavigationThemeMode.dark;
149
              _startNavigation();
150
            },
151
            child: const Text("Start Navigation with dark mode"),
152
          ),
153
          ElevatedButton(
154
            style: ButtonStyle(
155
                backgroundColor: WidgetStateProperty.all(
156
                    routes.isEmpty ? Colors.grey : Colors.blueAccent),
157
                enableFeedback: routes.isNotEmpty),
158
            onPressed: () {
159
              themeMode = NavigationThemeMode.system;
160
              _startNavigation();
161
            },
162
            child: const Text("Start Navigation with following system mode"),
163
          ),
164
        ],
165
      ),
166
    );
167
  }
168
}
169

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.

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.

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.

Navigation Theme Mode

Introduction

Code summary

Initialization and Map Display:

Fetching Routes:

Starting Navigation:

Explanation of Navigation Theme Mode Customization:


Android snapshot	iOS snapshot