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


Android snapshot	iOS 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

1
import UIKit
2
import Flutter
3
import nb_navigation_flutter
4

5
@UIApplicationMain
6
@objc class AppDelegate: FlutterAppDelegate, UINavigationControllerDelegate {
7
    override func application(
8
        _ application: UIApplication,
9
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
10
    ) -> Bool {
11
        GeneratedPluginRegistrant.register(with: self)
12
        customStyle()
13
        
14
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
15
        window = UIWindow(frame: UIScreen.main.bounds)
16
        var navigationController = UINavigationController.init(rootViewController: controller)
17
        window?.rootViewController = navigationController
18
        navigationController.delegate = self
19
        window?.makeKeyAndVisible()
20
        
21
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
22
    }
23
    
24
    func customStyle() {
25
        NavStyleManager.customDayStyle = CustomDayStyle()
26
        NavStyleManager.customNightStyle = CustomNightStyle()
27
    }
28
    
29
    func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
30
        navigationController.navigationBar.isHidden = viewController.isKind(of: FlutterViewController.self)
31
    }
32
}

CustomStyle.swift view source

1
//
2
//  CustomStyle.swift
3
//  Runner
4
//
5
//
6

7
import Foundation
8
import NbmapNavigation
9

10
class CustomDayStyle: DayStyle {
11
    required init() {
12
        super.init()
13
        mapStyleURL = URL(string: "https://api.nextbillion.io/tt/style/1/style/22.2.1-9?map=2/basic_street-light")!
14
    }
15
    
16
    override func apply() {
17
        super.apply()
18
        ArrivalTimeLabel.appearance().font = UIFont.systemFont(ofSize: 18, weight: .medium).adjustedFont
19
        ArrivalTimeLabel.appearance().normalTextColor = .defaultPrimaryText
20
        BottomBannerContentView.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
21
        BottomBannerView.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
22
        Button.appearance().textColor = .defaultPrimaryText
23
        CancelButton.appearance().backgroundColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)
24
        CancelButton.appearance().textFont = UIFont.systemFont(ofSize: 16, weight: .regular).adjustedFont
25
        CancelButton.appearance().textColor =  #colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
26
        OverviewButton.appearance().borderColor = #colorLiteral(red: 0.94117647, green: 0.95294118, blue: 1, alpha: 1)
27
        OverviewButton.appearance().tintColor = #colorLiteral(red: 0.2566259801, green: 0.3436664343, blue: 0.8086165786, alpha: 0.6812137831)
28
        DismissButton.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
29
        DismissButton.appearance().textColor = #colorLiteral(red: 0.09803921569, green: 0.09803921569, blue: 0.09803921569, alpha: 1)
30
        DismissButton.appearance().textFont = UIFont.systemFont(ofSize: 20, weight: .medium).adjustedFont
31
        DistanceLabel.appearance().unitFont = UIFont.systemFont(ofSize: 14, weight: .medium).adjustedFont
32
        DistanceLabel.appearance().valueFont = UIFont.systemFont(ofSize: 22, weight: .medium).adjustedFont
33
        DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor = #colorLiteral(red: 0.980392158, green: 0.980392158, blue: 0.980392158, alpha: 1)
34
        DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).valueTextColor = #colorLiteral(red: 0.980392158, green: 0.980392158, blue: 0.980392158, alpha: 1)
35
        DistanceLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).unitTextColor = #colorLiteral(red: 0.3999999762, green: 0.3999999762, blue: 0.3999999762, alpha: 1)
36
        DistanceLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).valueTextColor = #colorLiteral(red: 0.3999999762, green: 0.3999999762, blue: 0.3999999762, alpha: 1)
37
        DistanceRemainingLabel.appearance().font = UIFont.systemFont(ofSize: 18, weight: .medium).adjustedFont
38
        DistanceRemainingLabel.appearance().normalTextColor = #colorLiteral(red: 0.3999999762, green: 0.3999999762, blue: 0.3999999762, alpha: 1)
39
        EndOfRouteButton.appearance().textColor = .darkGray
40
        EndOfRouteButton.appearance().textFont = .systemFont(ofSize: 15)
41
        EndOfRouteContentView.appearance().backgroundColor = .white
42
        EndOfRouteStaticLabel.appearance().normalFont = .systemFont(ofSize: 14.0)
43
        EndOfRouteStaticLabel.appearance().normalTextColor = #colorLiteral(red: 0.217173934, green: 0.3645851612, blue: 0.489295125, alpha: 1)
44
        EndOfRouteTitleLabel.appearance().normalFont = .systemFont(ofSize: 36.0)
45
        EndOfRouteTitleLabel.appearance().normalTextColor = UIColor.black
46
        FloatingButton.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
47
        FloatingButton.appearance().tintColor = tintColor
48
        GenericRouteShield.appearance().backgroundColor = UIColor.clear
49
        InstructionsBannerContentView.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
50
        InstructionsBannerView.appearance().backgroundColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)
51
        LaneView.appearance().primaryColor = .defaultLaneArrowPrimary
52
        LaneView.appearance().secondaryColor = .defaultLaneArrowSecondary
53
        LanesView.appearance().backgroundColor = #colorLiteral(red: 0.1522715986, green: 0.5290428996, blue: 0.1787364483, alpha: 1)
54
        LineView.appearance().lineColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.1)
55
        ManeuverView.appearance().backgroundColor = .clear
56
        ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).primaryColor = .defaultTurnArrowPrimary
57
        ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).secondaryColor = .defaultTurnArrowSecondary
58
        ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).primaryColor = .defaultTurnArrowPrimary
59
        ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).secondaryColor = .defaultTurnArrowSecondary
60
        ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).primaryColor =  #colorLiteral(red: 0.2392157018, green: 0.2392157018, blue: 0.2392157018, alpha: 1) //.defaultTurnArrowPrimary
61
        ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).secondaryColor = .defaultTurnArrowSecondary
62
        NavigationMapView.appearance().maneuverArrowColor       = .defaultManeuverArrow
63
        NavigationMapView.appearance().maneuverArrowStrokeColor = .defaultManeuverArrowStroke
64
        NavigationMapView.appearance().routeAlternateColor      = .defaultAlternateLine
65
        NavigationMapView.appearance().routeCasingColor         = .defaultRouteCasing
66
        NavigationMapView.appearance().trafficHeavyColor        = .trafficHeavy
67
        NavigationMapView.appearance().trafficLowColor          = .trafficLow
68
        NavigationMapView.appearance().trafficModerateColor     = .trafficModerate
69
        NavigationMapView.appearance().trafficSevereColor       = .trafficSevere
70
        NavigationMapView.appearance().trafficUnknownColor      = #colorLiteral(red: 0.6196078431, green: 0.06274509804, blue: 1, alpha: 1)
71
        NavigationView.appearance().backgroundColor = #colorLiteral(red: 0.764706, green: 0.752941, blue: 0.733333, alpha: 1)
72
        NextBannerView.appearance().backgroundColor = #colorLiteral(red: 0.6196078431, green: 0.06274509804, blue: 1, alpha: 1)
73
        NextInstructionLabel.appearance().font = UIFont.systemFont(ofSize: 20, weight: .medium).adjustedFont
74
        NextInstructionLabel.appearance().normalTextColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
75
        PrimaryLabel.appearance().normalFont = UIFont.systemFont(ofSize: 30, weight: .medium).adjustedFont
76
        PrimaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
77
        PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor = #colorLiteral(red: 0.09803921569, green: 0.09803921569, blue: 0.09803921569, alpha: 1)
78
        PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalFont =  UIFont.systemFont(ofSize: 15, weight: .medium).adjustedFont
79
        ProgressBar.appearance().barColor = #colorLiteral(red: 0.149, green: 0.239, blue: 0.341, alpha: 1)
80
        ReportButton.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
81
        ReportButton.appearance().textColor = tintColor!
82
        ReportButton.appearance().textFont = UIFont.systemFont(ofSize: 15, weight: .medium).adjustedFont
83
        ResumeButton.appearance().backgroundColor = #colorLiteral(red: 0.4609908462, green: 0.5315783024, blue: 0.9125307202, alpha: 1)
84
        ResumeButton.appearance().tintColor =  #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
85
        SecondaryLabel.appearance().normalFont = UIFont.systemFont(ofSize: 26, weight: .medium).adjustedFont
86
        SecondaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = #colorLiteral(red: 0.2156862745, green: 0.2156862745, blue: 0.2156862745, alpha: 1)
87
        SecondaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor = #colorLiteral(red: 0.2156862745, green: 0.2156862745, blue: 0.2156862745, alpha: 1)
88
        SeparatorView.appearance().backgroundColor = #colorLiteral(red: 0.737254902, green: 0.7960784314, blue: 0.8705882353, alpha: 1)
89
        StatusView.appearance().backgroundColor = UIColor.black.withAlphaComponent(2.0/3.0)
90
        StepInstructionsView.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
91
        StepListIndicatorView.appearance().gradientColors = [#colorLiteral(red: 0.431372549, green: 0.431372549, blue: 0.431372549, alpha: 1), #colorLiteral(red: 0.6274509804, green: 0.6274509804, blue: 0.6274509804, alpha: 1), #colorLiteral(red: 0.431372549, green: 0.431372549, blue: 0.431372549, alpha: 1)]
92
        StepTableViewCell.appearance().backgroundColor = #colorLiteral(red: 0.9675388083, green: 0.9675388083, blue: 0.9675388083, alpha: 1)
93
        StepsBackgroundView.appearance().backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
94
        TimeRemainingLabel.appearance().font = UIFont.systemFont(ofSize: 28, weight: .medium).adjustedFont
95
        TimeRemainingLabel.appearance().normalTextColor = .defaultPrimaryText
96
        TimeRemainingLabel.appearance().trafficHeavyColor = #colorLiteral(red:0.91, green:0.20, blue:0.25, alpha:1.0)
97
        TimeRemainingLabel.appearance().trafficLowColor = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
98
        TimeRemainingLabel.appearance().trafficModerateColor = #colorLiteral(red:0.95, green:0.65, blue:0.31, alpha:1.0)
99
        TimeRemainingLabel.appearance().trafficSevereColor = #colorLiteral(red: 0.7705719471, green: 0.1753477752, blue: 0.1177056804, alpha: 1)
100
        TimeRemainingLabel.appearance().trafficUnknownColor = .defaultPrimaryText
101
//        UserPuckCourseView.appearance().puckColor = #colorLiteral(red: 0.4609908462, green: 0.5315783024, blue: 0.9125307202, alpha: 1)
102
        WayNameLabel.appearance().normalFont = UIFont.systemFont(ofSize:20, weight: .medium).adjustedFont
103
        WayNameLabel.appearance().normalTextColor = #colorLiteral(red: 0.968627451, green: 0.968627451, blue: 0.968627451, alpha: 1)
104
        WayNameView.appearance().backgroundColor = UIColor.defaultRouteLayer.withAlphaComponent(0.85)
105
        WayNameView.appearance().borderColor = UIColor.defaultRouteCasing.withAlphaComponent(0.8)
106
        SpeedView.appearance().textColor = UIColor.defaultPrimaryText
107
        SpeedView.appearance().signBackColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
108
    }
109
}
110

111
class CustomNightStyle: NightStyle {
112
    required init() {
113
        super.init()
114
        mapStyleURL = URL(string: "https://api.nextbillion.io/tt/style/1/style/22.2.1-9?map=2/basic_street-dark")!
115
    }
116
    
117
    override func apply() {
118
        super.apply()
119
        NavigationMapView.appearance().trafficUnknownColor = UIColor.green
120
    }
121
}
122

CustomNavigationStyle 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 CustomNavigationStyle extends StatefulWidget {
6
  static const String title = "Customize Navigation Style";
7

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

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

14
class 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
  @override
40
  void initState() {
41
    super.initState();
42
  }
43

44
  @override
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
  @override
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.

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.

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.

Customize Navigation Style

Code summary

Customize Navigation Style:

Draw Route Line:

Supported Route Line Style Attributes:

Start Navigation: