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;

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

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

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

14
class RouteLineStyleState extends State<RouteLineStyle> {
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
  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(RouteLineStyle.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 response =
81
        await NBNavigation.fetchRoute(requestParams);
82
    List<DirectionsRoute> routeData = response.directionsRoutes;
83
    if (routeData.isNotEmpty) {
84
      setState(() {
85
        routes = routeData;
86
      });
87
      drawRoutes(routeData);
88
    } else if (response.message != null) {
89
      if (kDebugMode) {
90
        print("====error====${response.message}===${response.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 = false;
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
}
149