How to Draw Polylines on Google Map in Flutter

In this example, you will learn to draw polylines on Google Maps in Flutter. Drawing polylines is an important factor of Google map to show paths, directions, or trails with different kinds of colors or lines, see the example below to draw polylines on Google Map:

Read this also:

Define to variable to store polylines joints:

Set<Polyline> polylines={};

Now, we have three joints where two lines will be drawn:

LatLng loc1 = LatLng(27.6602292, 85.308027);  
LatLng loc2 = LatLng(27.6599592, 85.3102498);
LatLng loc3 = LatLng(27.661838, 85.308543);

Now, add polyline on variable:

polylines.add(Polyline(
    polylineId: PolylineId(loc1.toString()),
    visible: true,
    width: 5, //width of polyline
    points: [
        loc1, //start point
        loc2, //end point
    ],
    color: Colors.deepPurpleAccent, //color of polyline
));

polylines.add(Polyline(
    polylineId: PolylineId(loc1.toString()),
    visible: true,
    width: 5, //width of polyline
    points: [
        loc2, //start point
        loc3, //end point
    ],
    color: Colors.deepOrangeAccent, //color of polyline
));

Apply the polylines on Google Map:

GoogleMap( 
     polylines: polylines, //polylines list
)

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  GoogleMapController? mapController; //contrller for Google map
  Set<Polyline> polylines={};

  LatLng loc1 = LatLng(27.6602292, 85.308027);  
  LatLng loc2 = LatLng(27.6599592, 85.3102498);
  LatLng loc3 = LatLng(27.661838, 85.308543);

  @override
  void initState() {
    drawPolylines();
    super.initState();
  }

  drawPolylines() async { 
      polylines.add(Polyline(
          polylineId: PolylineId(loc1.toString()),
          visible: true,
          width: 5, //width of polyline
          points: [
              loc1, //start point
              loc2, //end point
          ],
          color: Colors.deepPurpleAccent, //color of polyline
      ));

      polylines.add(Polyline(
          polylineId: PolylineId(loc1.toString()),
          visible: true,
          width: 5, //width of polyline
          points: [
              loc2, //start point
              loc3, //end point
          ],
          color: Colors.deepOrangeAccent, //color of polyline
      ));

      setState(() {
          //refresh UI
      });
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Draw Polylines on Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: loc1, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  polylines: polylines, //polylines list
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
              },
          )
       );
  }
}