Customize Route Line Style

1      /// The color of the shield icon for the route.
2 	final Color routeShieldColor;
3
4  	/// The color of the shield icon for alternative routes.
5  	final Color alternativeRouteShieldColor;
6
7  	/// The scale factor for the route line.
8  	final double routeScale;
9
10  	/// The scale factor for alternative route lines.
11  	final double alternativeRouteScale;
12
13  	/// The default color of the route line.
14  	final Color routeDefaultColor;
15
16  	/// The default color of alternative route lines.
17  	final Color alternativeRouteDefaultColor;
18
19  	/// The asset image name of the route origin marker.
20  	final String originMarkerName;
21
22  	/// The asset image name of the route destination marker.
23  	final String destinationMarkerName;
24
25  	/// The background color of the primary route's duration symbol.
26  	final Color durationSymbolPrimaryBackgroundColor;
27
28  	/// The background color of the alternative route's duration symbol.
29  	final Color durationSymbolAlternativeBackgroundColor;
30
31  	/// The text style for the primary route's duration symbol.
32  	final TextStyle durationSymbolPrimaryTextStyle;
33
34  	/// The text style for alternative route's duration symbols.
35  	final TextStyle durationSymbolAlternativeTextStyle;

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 RouteLineStyle extends StatefulWidget {
9  static const String title = "Customize Route Line Style";
10
11  @override
12  RouteLineStyleState createState() => RouteLineStyleState();
13}
14
15class RouteLineStyleState extends State<RouteLineStyle> {
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(RouteLineStyle.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      mode: ValidModes.car,
72      geometryType: SupportedGeometry.polyline,
73    );
74
75    await NBNavigation.fetchRoute(requestParams, (routes, error) async {
76      if (routes.isNotEmpty) {
77        setState(() {
78          this.routes = routes;
79        });
80        drawRoutes(routes);
81      } else if (error != null) {
82        print("====error====${error}");
83      }
84    });
85  }
86
87  void _startNavigation() {
88    if (routes.isEmpty) return;
89    NavigationLauncherConfig config = NavigationLauncherConfig(route: routes.first, routes: routes);
90    config.locationLayerRenderMode = LocationLayerRenderMode.GPS;
91    config.enableDissolvedRouteLine = false;
92    config.shouldSimulateRoute = true;
93    config.themeMode = NavigationThemeMode.system;
94    config.useCustomNavigationStyle = false;
95    NBNavigation.startNavigation(config);
96  }
97
98  Future<void> drawRoutes(List<DirectionsRoute> routes) async {
99    navNextBillionMap.clearRoute();
100    await navNextBillionMap.drawRoute(routes);
101  }
102
103  @override
104  void dispose() {
105    super.dispose();
106  }
107
108  _buttonWidget() {
109    return Positioned(
110      bottom: 60,
111      child: Padding(
112        padding: const EdgeInsets.only(left: 8, top: 18.0),
113        child: Row(
114          children: [
115            ElevatedButton(
116              style: ButtonStyle(
117                backgroundColor: MaterialStateProperty.all(Colors.blueAccent),
118              ),
119              onPressed: () {
120                _fetchRoute();
121              },
122              child: const Text("Fetch Route"),
123            ),
124            const Padding(padding: EdgeInsets.only(left: 8)),
125            ElevatedButton(
126              style: ButtonStyle(
127                  backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
128                  enableFeedback: routes.isNotEmpty),
129              onPressed: () {
130                _startNavigation();
131              },
132              child: const Text("Start Navigation"),
133            ),
134          ],
135        ),
136      ),
137    );
138  }
139}