Customize Navigation Style

This Example Shows

  • Draw route lines on the map view
  • Customize Navigation view style
    • iOS: Import nb_navigation_flutter in the AppDelegate of your ios project, customize the navigation view appearance using customDayStyle and customNightStyle
    • Android: Add Custom style named CustomNavigationViewLight and CustomNavigationViewDark in your android project styles.xml with parent = "NavigationViewLight" or parent = "NavigationViewDark"
  • Use customize navigation style by setting useCustomNavigationStyle to TRUE in NavigationLauncherConfig when startNavigation
docs-imagedocs-image
Android snapshotiOS snapshot

For all code examples, refer to Flutter Navigation Code Example

styles.xml in android project view source

1<style name="CustomNavigationViewLight" parent="NavigationViewLight">
2 <!--customize your navigation style-->
3 <item name="navViewRouteStyle">@style/CustomRouteStyle</item>
4 <item name="navViewBannerBackground">#FFC84E0D</item>
5 <item name="navViewBannerPrimaryText">#FF9E10FF</item>
6 <item name="navViewBannerSecondaryText">#FFFA8C1C</item>
7 <item name="navViewBannerManeuverPrimary">#FF4E2EFF</item>
8 <item name="navViewPrimaryText">#FFFF0115</item>
9 <item name="navViewSecondaryText">#FF1A6620</item>
10 <item name="navigationViewRouteOverviewDrawable">@drawable/ic_baseline_navigation_24</item>
11 <item name="navViewRouteOverviewBackground">#FF41FF00</item>
12 <item name="navViewListBackground">#FFFFC0A8</item>
13 <item name="navViewListPrimary">#FF6E7ACA</item>
14 <item name="navViewListSecondary">#FF003CE0</item>
15 <item name="navViewListManeuverPrimary">#FFA90403</item>
16 <item name="navViewListManeuverSecondary">#FFA90403</item>
17 <item name="navigationViewReCentreInfoColor">#FFA90403</item>
18 <item name="navigationViewReCentreBackgroundDrawable">@drawable/recenter_btn_background</item>
19 <item name="navViewSoundColor">#FFA90403</item>
20 <item name="navViewSoundBackgroundColor">#FF6E7ACA</item>
21 <item name="navViewPauseColor">#FFFFC0A8</item>
22 <item name="navViewPauseBackgroundColor">#FFFFFFFF</item>
23 <item name="navViewRestartColor">#FFFFC0A8</item>
24 <item name="navViewRestartBackgroundColor">#FFFFFFFF</item>
25 <item name="navigationCurrentSpeedBackgroundColor">#FF6E7ACA</item>
26 <item name="navigationCurrentSpeedTextColor">#FF000000</item>
27 <item name="navigationCurrentSpeedUnitTextColor">#FF9E10FF</item>
28 </style>
29
30
31 <style name="CustomRouteStyle" parent="NavigationMapRoute">
32 <item name="routeColor">#FFE97F2F</item>
33 <item name="routeScale">1.0</item>
34 <item name="alternativeRouteScale">1.0</item>
35 <item name="routeShieldColor">#FF54E910</item>
36 <item name="routeFloatDurationBackgroundPrimary">#FFE97F2F</item>
37 <item name="maneuverArrowColor">#FFFF0106</item>
38 <item name="maneuverArrowBorderColor">#FF70C35D</item>
39 <item name="routeWayNameBackGroundColor">#FFE97F2F</item>
40 <item name="routeWayNameTextColor">#FFFFFFFF</item>
41 <item name="navigationDissolvedRouteColor">#FFFFC0A8</item>
42 <item name="navigationDissolvedAnimatedRouteColor">#FF54E910</item>
43 </style>
44
45
46 <style name="CustomNavigationViewDark" parent="NavigationViewDark">
47 <!--customize your navigation style-->
48
49 </style>

AppDelegate.swift in iOS project view source

1import UIKit
2import Flutter
3import nb_navigation_flutter
4
5@UIApplicationMain
6@objc class AppDelegate: FlutterAppDelegate {
7 override func application(
8 _ application: UIApplication,
9 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
10 ) -> Bool {
11 GeneratedPluginRegistrant.register(with: self)
12 customStyle()
13 return super.application(application, didFinishLaunchingWithOptions: launchOptions)
14 }
15
16 func customStyle() {
17 customDayStyle.arrivalTimeLabelFont = UIFont.systemFont(ofSize: 28, weight: .medium).adjustedFont
18 customDayStyle.trafficUnknownColor = UIColor.red
19 customDayStyle.nextBannerViewBackgroundColor = #colorLiteral(red: 0.7843137255, green: 0.3058823529, blue: 0.05098039216, alpha: 1)
20 customDayStyle.maneuverNextBannerPrimaryColor = #colorLiteral(red: 0.6196078431, green: 0.06274509804, blue: 1, alpha: 1)
21 customNightStyle.trafficUnknownColor = UIColor.green
22 }
23}

CustomNavigationStyle view source

1import 'package:flutter/foundation.dart';
2import 'package:flutter/material.dart';
3import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
4
5class CustomNavigationStyle extends StatefulWidget {
6 static const String title = "Customize Navigation Style";
7
8 const CustomNavigationStyle({super.key});
9
10
11 CustomNavigationStyleState createState() => CustomNavigationStyleState();
12}
13
14class CustomNavigationStyleState extends State<CustomNavigationStyle> {
15 NextbillionMapController? controller;
16 List<DirectionsRoute> routes = [];
17 late NavNextBillionMap navNextBillionMap;
18
19 LatLng origin = const LatLng(1.312533169133601, 103.75986708439264);
20 LatLng dest = const LatLng(1.310473772283314, 103.77982271935586);
21
22 void _onMapCreated(NextbillionMapController controller) {
23 this.controller = controller;
24 }
25
26 Future<void> _onStyleLoaded() async {
27 if (controller != null) {
28 var routeLineStyle = const RouteLineProperties(
29 routeDefaultColor: Color(0xFFE97F2F),
30 routeScale: 1.0,
31 alternativeRouteScale: 1.0,
32 routeShieldColor: Color(0xFF54E910),
33 durationSymbolPrimaryBackgroundColor: Color(0xFFE97F2F));
34 navNextBillionMap = await NavNextBillionMap.create(controller!,
35 routeLineProperties: routeLineStyle);
36 }
37 }
38
39
40 void initState() {
41 super.initState();
42 }
43
44
45 Widget build(BuildContext context) {
46 return Scaffold(
47 appBar: AppBar(
48 title: const Text(CustomNavigationStyle.title),
49 ),
50 body: Stack(
51 children: [
52 NBMap(
53 onMapCreated: _onMapCreated,
54 initialCameraPosition: CameraPosition(
55 target: LatLng(origin.latitude, 103.76986708439264),
56 zoom: 13.0,
57 ),
58 onStyleLoadedCallback: _onStyleLoaded,
59 ),
60 _buttonWidget(),
61 ],
62 ),
63 );
64 }
65
66 void _fetchRoute() async {
67 RouteRequestParams requestParams = RouteRequestParams(
68 origin: origin,
69 destination: dest,
70 // waypoints: [Coordinate(latitude: wayP2.latitude, longitude: wayP2.longitude)],
71 // overview: ValidOverview.simplified,
72 // avoid: [SupportedAvoid.toll, SupportedAvoid.ferry],
73 // option: SupportedOption.flexible,
74 // truckSize: [200, 200, 600],
75 // truckWeight: 100,
76 unit: SupportedUnits.imperial,
77 mode: ValidModes.car,
78 );
79
80 DirectionsRouteResponse routeResponse =
81 await NBNavigation.fetchRoute(requestParams);
82 if (routeResponse.directionsRoutes.isNotEmpty) {
83 setState(() {
84 routes = routeResponse.directionsRoutes;
85 });
86 drawRoutes(routes);
87 } else if (routeResponse.message != null) {
88 if (kDebugMode) {
89 print(
90 "====error====${routeResponse.message}===${routeResponse.errorCode}");
91 }
92 }
93 }
94
95 void _startNavigation() {
96 if (routes.isEmpty) return;
97 NavigationLauncherConfig config =
98 NavigationLauncherConfig(route: routes.first, routes: routes);
99 config.locationLayerRenderMode = LocationLayerRenderMode.gps;
100 config.shouldSimulateRoute = true;
101 config.themeMode = NavigationThemeMode.system;
102 config.useCustomNavigationStyle = true;
103 NBNavigation.startNavigation(config);
104 }
105
106 Future<void> drawRoutes(List<DirectionsRoute> routes) async {
107 navNextBillionMap.clearRoute();
108 navNextBillionMap.drawRoute(routes);
109 }
110
111
112 void dispose() {
113 super.dispose();
114 }
115
116 _buttonWidget() {
117 return Positioned(
118 bottom: 60,
119 child: Padding(
120 padding: const EdgeInsets.only(left: 8, top: 18.0),
121 child: Row(
122 children: [
123 ElevatedButton(
124 style: ButtonStyle(
125 backgroundColor: WidgetStateProperty.all(Colors.blueAccent),
126 ),
127 onPressed: () {
128 _fetchRoute();
129 },
130 child: const Text("Fetch Route"),
131 ),
132 const Padding(padding: EdgeInsets.only(left: 8)),
133 ElevatedButton(
134 style: ButtonStyle(
135 backgroundColor: WidgetStateProperty.all(
136 routes.isEmpty ? Colors.grey : Colors.blueAccent),
137 enableFeedback: routes.isNotEmpty),
138 onPressed: () {
139 _startNavigation();
140 },
141 child: const Text("Start Navigation"),
142 ),
143 ],
144 ),
145 ),
146 );
147 }
148}

Code summary

The above code snippet demonstrates how to customize the navigation style for turn-by-turn navigation. The app uses the nb_maps_flutter and nb_navigation_flutter packages for map rendering, route drawing, and navigation-related functionality.

Customize Navigation Style:

  • iOS: Import nb_navigation_flutter in the AppDelegate of your iOS project, customize the navigation view appearance using customDayStyle and customNightStyle
  • Android: Add Custom style named CustomNavigationViewLight and CustomNavigationViewDark in your android project styles.xml with parent = "NavigationViewLight" or parent = "NavigationViewDark"
  • Use customize navigation style by setting useCustomNavigationStyle to TRUE in NavigationLauncherConfig when startNavigation

Draw Route Line:

  • The NBMap widget from the nb_maps_flutter package is used to display the map.
  • When the "Fetch Route" button is pressed, the _fetchRoute function is called. It sends a route request to the navigation service (NBNavigation.fetchRoute) with the specified origin and destination coordinates. The response contains a list of DirectionsRoute objects representing different possible routes from the origin to the destination.
  • The drawRoutes function is used to draw the fetched routes on the map using the NavNextBillionMap controller.

Customize Route Line Style:

  • The _onStyleLoaded function is called when the map style is loaded. It initializes a RouteLineProperties object to customize the appearance of the route line.
  • The NavNextBillionMap controller is created with the specified routeLineStyle object, which customizes attributes like the route color, route scale, alternative route scale, route shield color, and duration symbol background color.

Supported Route Line Style Attributes:

The RouteLineProperties class provides the following supported route line style attributes:

  • routeDefaultColor: The default color of the main route line.

  • routeScale: The scaling factor applied to the width of the main route line.

  • alternativeRouteScale: The scaling factor applied to the width of alternative route lines.

  • routeShieldColor: The color of the route shield, which is displayed on the map for certain types of routes.

  • durationSymbolPrimaryBackgroundColor: The background color of the duration symbol displayed along the route line.

  • alternativeRouteDefaultColor: The default color of alternative route lines.

  • originMarkerName: The asset image name of the route origin marker.

  • destinationMarkerName: The asset image name of the route destination marker.

  • durationSymbolPrimaryBackgroundColor: The background color of the primary route's duration symbol.

  • durationSymbolAlternativeBackgroundColor: The background color of the alternative route's duration symbol.

  • durationSymbolPrimaryTextStyle: The text style for the primary route's duration symbol.

  • durationSymbolAlternativeTextStyle: The text style for alternative route's duration symbols.

Start Navigation:

  • The "Start Navigation" button is used to initiate turn-by-turn navigation using the selected route.

  • When the button is pressed, the _startNavigation function is called. It launches the navigation using NBNavigation.startNavigation with the first route from the list.

Please note that some parts of the code (e.g., fetchRoute and startNavigation) rely on external services or APIs provided by the nb_navigation_flutter package, which are not fully visible from the code snippet. These services handle the actual route fetching and navigation functionality. Also, ensure that you have the required permissions and API keys set up to use the mapping and navigation services properly.