> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Navigation route
> Draw a route between two points on a Flutter map.
Before you begin, please make sure you have the [Baato Flutter Library](/libraries/flutter) installed in your app.
#### Baato Logo Attributions:
We highly request you to include Baato logo in the map view while using any of our Baato map styles. The example code is available [here](/examples/flutter/display-map).
### Display a navigation route between two points
Show a navigation route between a starting point and a destination.
Below is a complete example that renders navigation between locations .
```dart theme={null}
@override
Widget build(BuildContext context) {
return Scaffold(
body: BaatoMap(
onMapCreated: _onMapCreated,
onTap: (point, coordinate, feature) {
_addTappedPointToPointsList(coordinate);
},
initialPosition: BaatoCoordinate(
latitude: 27.7192873,
longitude: 85.3238007,
),
),
);
}
_requestRoutingDetails(List coordinates) async {
//get routes between start and destination point
final response = await Baato.api.direction.getRoutes(
startCoordinate: coordinates[0],
endCoordinate: coordinates[1],
mode: BaatoDirectionMode.foot,
decodePolyline: true);
_showRouteDetails(response);
}
//Automatically render the route on map based on the response
_showRouteDetails(BaatoRouteResponse route) {
mapController.routeManager.drawRouteFromResponse(
route,
// lineLayerProperties: BaatoLineLayerProperties() //[optional]Customize line property
);
}
void _addTappedPointToPointsList(BaatoCoordinate coordinate) {
if (_circleCount < 2) {
_addCircle(coordinate);
_circleCount++;
_points.add(coordinate);
if (_circleCount == 2) _requestRoutingDetails(_points);
} else {
mapController.shapeManager.clearCircles();
mapController.shapeManager.clearLines();
_circleCount = 0;
_points.clear();
_addTappedPointToPointsList(coordinate);
}
}
// add circle layer to indicate start and destination points
void _addCircle(BaatoCoordinate coordinate) {
String circleColor = "#081E2A";
if (_circleCount == 1) circleColor = "#63A088";
mapController.shapeManager.addCircle(
BaatoCircleOptions(
center: coordinate,
circleRadius: 10,
circleColor: circleColo,
),
);
}
```