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:

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

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>):

await 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:

1
2
3
4
5
6
7
8
9
void _onMapCreated(NextbillionMapController controller) {
    this.controller = controller;
}

void _onStyleLoaded() {
    if (controller != null) {
      navNextBillionMap = NavNextBillionMap(controller!);
    }
  }

Draw routes

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

await navNextBillionMap.drawRoute(routes);

Clear routes

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

 navNextBillionMap.clearRoute();

Toggle Alternative Route Visibility

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

 navNextBillionMap.toggleAlternativeVisibilityWith(visible);

Toggle Route DurationSymbol Visibility

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

 navNextBillionMap.toggleDurationSymbolVisibilityWith(visible);

Add RouteSelected Listener.

You can add route switching listener in the onMapClick callback:

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

Start navigation

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

  • route: The selected route for directions

  • routes: A list of available routes

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

    • system: follows system theme mode

    • light: applies light theme

    • dark: applies dark theme

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

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

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

  • navigationMapStyleUrl: Indicates the map style in the Navigation view. Its priority is higher than the navViewMapStyle of (CustomNavigationViewLight, CustomNavigationViewDark) set in the styles.xml for Android and the mapStyleURL of (customDayStyle, customNightStyle) set in the AppDelegate for iOS.

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

NBNavigation.startNavigation(config);
docs-image