How to draw polyline between two points in flutter

3 min readMay 5, 2021

Flutter is Google’s mobile app SDK for crafting high-quality native experiences on iOS and Android in record time.

With the Google Maps Flutter plugin, you can add maps based on Google maps data to your application. The plugin automatically handles access to the Google Maps servers, map display, and response to user gestures such as clicks and drags. You can also add markers to your map. These objects provide additional information for map locations, and allow the user to interact with the map.

In this article build a mobile app featuring a Google Map using the Flutter SDK.

Display a Google Map
Draw a polyline between two points in flutter

Adding Google Maps Flutter plugin as a dependency

Adding additional capability to a Flutter app is easy using Pub packages. Add Google Maps Flutter plugin by adding a single line to the pubspec.yaml file.

name: google_maps_in_flutter
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: '>=2.12.0 <3.0.0'

dependencies:
  flutter:
    sdk: flutter
  # Add the following line
  google_maps_flutter: ^2.0.3
  flutter_polyline_points: ^1.0.0dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

Adding Google Maps to the app

It’s all about the API keys

To use Google Maps in your Flutter app, you need to configure an API project with the Google Maps Platform, following both the Maps SDK for Android’s Get API key, and Maps SDK for iOS’ Get API key processes. With API keys in hand, carry out the following steps to configure both Android and iOS applications.

To add an API key to the Android app, edit the AndroidManifest.xml file in android/app/src/main. Add a single meta-data entry containing the API key created in the previous step inside the application node.

In android/app/src/main/AndroidManifest.xml

<!-- TODO: Add your API key here -->
        <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR-KEY-HERE"/>

Adding an API key for an iOS app

To add an API key to the iOS app, edit the AppDelegate.swift file in ios/Runner. Unlike Android, adding an API key on iOS requires changes to the source code of the Runner app. The AppDelegate is the core singleton that is part of the app initialization process.

Make two changes to this file. First, add an #import statement to pull in the Google Maps headers, and then call the provideAPIKey() method of the GMSServices singleton. This API key enables Google Maps to correctly serve map tiles.

In ios/Runner/AppDelegate.swift

// TODO: Add your API key
    GMSServices.provideAPIKey("YOUR-API-KEY")

Create a function like _onMapCreated() like a below:

void _onMapCreated(GoogleMapController controller) async {
mapController = controller;
}

Define a variables like a below:

GoogleMapController mapController;double _originLatitude = 23.0284, _originLongitude = 72.5068;
double _destLatitude = 23.1013, _destLongitude = 72.5407;
Map<MarkerId, Marker> markers = {};
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [
LatLng(23.0284, 72.5068),
LatLng(23.0504, 72.4991),
LatLng(23.1013, 72.5407),
];PolylinePoints polylinePoints = PolylinePoints();
BitmapDescriptor sourceIcon;
BitmapDescriptor destinationIcon;
String googleAPiKey = "YOUR_GOOGLE_API_KEY";

Our GoogleMap() will have a code snippet like a below:

GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(_originLatitude, _originLongitude),
zoom: 12,
),
myLocationEnabled: true,
tiltGesturesEnabled: true,
compassEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
onMapCreated: _onMapCreated,
markers: Set<Marker>.of(markers.values),
polylines: Set<Polyline>.of(polylines.values),
),

To add a marker we need to create _addMarker() like a below:

_addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker = Marker(
markerId: markerId,
icon: descriptor,
position: position,
);
markers[markerId] = marker;
}

We need to add _addMarker() in a initState() like a below:

@override
void initState() {
super.initState();
_addMarker(LatLng(_originLatitude, _originLongitude),"origin",BitmapDescriptor.defaultMarker,
);
_addMarker(
LatLng(_destLatitude, _destLongitude),
"destination",BitmapDescriptor.defaultMarker,
);
_getPolyline();
}

Our _getPolyline() will have a code snippet like a below:

_getPolyline() async {
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
googleAPiKey,
PointLatLng(_originLatitude, _originLongitude),
PointLatLng(_destLatitude, _destLongitude),
travelMode: TravelMode.driving,
wayPoints: [
PolylineWayPoint(
location: "THE GREAT INDIA",
),]);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
}
_addPolyLine();
}

Complete code snippet will look like a below:

Take a look at https://github.com/Kalpesh209/flutter_draw_polyline_between_two_points_google_map

Congratulations !!!

We have implemented the google map along with draw a polyline between two points in a Flutter app with a Google Map !!!

Keep Learning !!!
Keep Fluttering !!!