Customize Navigation Style

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>

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}

1import 'dart:math';
2
3import 'package:flutter/material.dart';
4import 'package:flutter/services.dart';
5import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
6import 'package:nb_maps_flutter/nb_maps_flutter.dart';
7
8class CustomNavigationStyle extends StatefulWidget {
9  static const String title = "Customize Navigation Style";
10
11  @override
12  CustomNavigationStyleState createState() => CustomNavigationStyleState();
13}
14
15class CustomNavigationStyleState extends State<CustomNavigationStyle> {
16  NextbillionMapController? controller;
17  List<DirectionsRoute> routes = [];
18  late NavNextBillionMap navNextBillionMap;
19
20  LatLng origin = LatLng(1.312533169133601, 103.75986708439264);
21  LatLng dest = LatLng(1.310473772283314, 103.77982271935586);
22
23  void _onMapCreated(NextbillionMapController controller) {
24    this.controller = controller;
25  }
26
27  void _onStyleLoaded() {
28    if (controller != null) {
29      var routeLineStyle = const RouteLineProperties(
30          routeDefaultColor: Color(0xFFE97F2F),
31          routeScale: 1.0,
32          alternativeRouteScale: 1.0,
33          routeShieldColor: Color(0xFF54E910),
34          durationSymbolPrimaryBackgroundColor: Color(0xFFE97F2F)
35      );
36      navNextBillionMap = NavNextBillionMap(controller!, routeLineProperties: routeLineStyle);
37    }
38  }
39
40  @override
41  void initState() {
42    super.initState();
43  }
44
45  @override
46  Widget build(BuildContext context) {
47    return Scaffold(
48      appBar: AppBar(
49        title: const Text(CustomNavigationStyle.title),
50      ),
51      body: Stack(
52        children: [
53          NBMap(
54            onMapCreated: _onMapCreated,
55            initialCameraPosition: CameraPosition(
56              target: LatLng(origin.latitude, 103.76986708439264),
57              zoom: 13.0,
58            ),
59            onStyleLoadedCallback: _onStyleLoaded,
60          ),
61          _buttonWidget(),
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      geometryType: SupportedGeometry.polyline,
80    );
81
82    await NBNavigation.fetchRoute(requestParams, (routes, error) async {
83      if (routes.isNotEmpty) {
84        setState(() {
85          this.routes = routes;
86        });
87        drawRoutes(routes);
88      } else if (error != null) {
89        print("====error====${error}");
90      }
91    });
92  }
93
94  void _startNavigation() {
95    if (routes.isEmpty) return;
96    NavigationLauncherConfig config = NavigationLauncherConfig(route: routes.first, routes: routes);
97    config.locationLayerRenderMode = LocationLayerRenderMode.GPS;
98    config.enableDissolvedRouteLine = false;
99    config.shouldSimulateRoute = true;
100    config.themeMode = NavigationThemeMode.system;
101    config.useCustomNavigationStyle = true;
102    NBNavigation.startNavigation(config);
103  }
104
105  Future<void> drawRoutes(List<DirectionsRoute> routes) async {
106    navNextBillionMap.clearRoute();
107    await navNextBillionMap.drawRoute(routes);
108  }
109
110  @override
111  void dispose() {
112    super.dispose();
113  }
114
115  _buttonWidget() {
116    return Positioned(
117      bottom: 60,
118      child: Padding(
119        padding: const EdgeInsets.only(left: 8, top: 18.0),
120        child: Row(
121          children: [
122            ElevatedButton(
123              style: ButtonStyle(
124                backgroundColor: MaterialStateProperty.all(Colors.blueAccent),
125              ),
126              onPressed: () {
127                _fetchRoute();
128              },
129              child: const Text("Fetch Route"),
130            ),
131            const Padding(padding: EdgeInsets.only(left: 8)),
132            ElevatedButton(
133              style: ButtonStyle(
134                  backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
135                  enableFeedback: routes.isNotEmpty),
136              onPressed: () {
137                _startNavigation();
138              },
139              child: const Text("Start Navigation"),
140            ),
141          ],
142        ),
143      ),
144    );
145  }
146}