Usage

The NextBillion.ai Flutter Navigation SDK empowers you to integrate advanced navigation capabilities into your Flutter application. Follow these steps to utilize the SDK effectively:

NB Maps

If you need to use Map-related functions, such as displaying a Map widget, please refer to our Flutter Maps Plugin Documentation.

Fetch routes

To request routes, use RouteRequestParams with NBNavigation. For supported parameters, please refer to Navigation API Documentation.

Create the RouteRequestParams object with the required parameters:

1RouteRequestParams requestParams = RouteRequestParams(
2      origin: origin,
3      destination: dest,
4      // waypoints: [waypoint1, waypoint2],
5      // language: 'en',
6      // alternatives: true,
7      // overview: ValidOverview.simplified,
8      // avoid: [SupportedAvoid.toll, SupportedAvoid.ferry],
9      // option: SupportedOption.flexible,
10      // unit: SupportedUnits.imperial,
11      // mode: ValidModes.car,
12      // geometryType: SupportedGeometry.polyline,
13    );

Fetch routes

Use NBNavigation.fetchRoute() to fetch routes with the specified requestParams, and receive the routes in the route result callback (Callback<List<DirectionsRoute> routes, String error>):

1await NBNavigation.fetchRoute(requestParams, (routes, error) async { });

Draw routes

After obtaining the routes, you can draw routes on the map view using NavNextBillionMap. Ensure you have the NextbillionMapController created in the onMapCreated callback of the NBMap widget. Refer to Flutter Maps Plugin documentation for more information.

Create NavNextBillionMap with NextbillionMapController in NBMap widget’s onStyleLoaded callback:

1void _onMapCreated(NextbillionMapController controller) {
2    this.controller = controller;
3}
4
5void _onStyleLoaded() {
6    if (controller != null) {
7      navNextBillionMap = NavNextBillionMap(controller!);
8    }
9  }

Draw routes

Once you have the NavNextBillionMap instance, draw the routes on the map view:

1await navNextBillionMap.drawRoute(routes);

Clear routes

To remove the drawn routes from the map view, use clearRoute():

1 navNextBillionMap.clearRoute();

Toggle Alternative Route Visibility

You can toggle the visibility of alternative routes on the map:

1 navNextBillionMap.toggleAlternativeVisibilityWith(visible);

Toggle Route DurationSymbol Visibility

Toggle the visibility of the route duration symbol on the map:

1 navNextBillionMap.toggleDurationSymbolVisibilityWith(visible);

Add RouteSelected Listener.

You can add route switching listener in the onMapClick callback:

1onMapClick(Point<double> point, LatLng coordinates) {
2    navNextBillionMap.addRouteSelectedListener(coordinates, (selectedRouteIndex) {})
3}

Start navigation

To initiate navigation, use NavigationLauncherConfig. The following properties can be configured as per your preference:

1. route: The selected route for directions

2. routes: A list of available routes

3. themeMode: The theme mode for navigation UI, default value is system

   1. system: following system mode
   2. light
   3. dark

4. locationLayerRenderMode: The rendering mode for the location layer, default value is LocationLayerRenderMode.GPS

5. shouldSimulateRoute: Whether to simulate the route during navigation, default value is false

6. enableDissolvedRouteLine: Whether to enable the dissolved route line during navigation, default value is true

1NavigationLauncherConfig config = NavigationLauncherConfig(route: routes.first, routes: routes, shouldSimulateRoute: true);
2
3NBNavigation.startNavigation(config);