Como desenhar polilinhas no Google Map em Flutter

Neste tutorial, aprenderemos a desenhar polilinhas no Google Maps no Flutter. Desenhar polilinhas é um fator importante do mapa do Google para mostrar caminhos, direções ou trilhas com diferentes tipos de cores ou linhas, veja o exemplo abaixo para desenhar polilinhas no mapa do Google:

Defina a variável para armazenar juntas de polilinhas:

Set<Polyline> polylines={};

Agora temos três juntas onde duas linhas serão desenhadas:

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

Agora, adicione polilinha na variável:

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

Aplique as polilinhas no Google Map:

GoogleMap( 
     polylines: polylines, //polylines list
)

Exemplo completo de aplicativo:

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; 
                    });
              },
          )
       );
  }
}

Desta forma, você pode desenhar polilinhas no Google Map no Flutter.