Polyline Layer

You can add lines to maps to display paths/ways made out of points to users using PolylineLayer().

FlutterMap(
    options: MapOptions(),
    children: [
        PolylineLayer(
            polylineCulling: false,
            polylines: [
                Polyline(
                  points: [LatLng(30, 40), LatLng(20, 50), LatLng(25, 45),],
                  color: Colors.blue,
                ),
            ],
        ),
    ],
),

Polylines (polylines)

As you can see PolylineLayerOptions() accepts list of Polylines. Each determines the shape of a polyline by defining the LatLng of each point. 'flutter_map' will then draw a line between each coordinate.

Property
Type
Defaults
Description

points

List<LatLng>

required

The coordinates of each point

strokeWidth

double

1.0

Width of the line

color

Color

Color(0xFF00FF00)

Fill color

borderStrokeWidth

double

0.0

Width of the border of the line

borderColor

Color

Color(0xFFFFFF00)

Color of the border of the line

gradientColors

List<Color>?

List of colors to make gradient fill instead of a solid fill

colorsStop

List<double>?

List doubles representing the percentage of where to START each gradient color along the line

isDotted

bool

false

Whether to make the line dotted/dashed instead of solid

Converting Formats

You may have a polyline with 'Google Polyline Encoding' (which is a lossy compression algorithm to convert coordinates into a string and back). These are often returned from routing engines, for example. In this case, you'll need to decode the polyline to the correct format first, before you can use it in a Polyline's points argument.

One way to accomplish this is to use another Flutter library called 'google_polyline_algorithm', together with a custom method. You can use the code snippet below, which can just be pasted into a file and imported whenever needed:

import 'package:latlong2/latlong.dart';
export 'package:google_polyline_algorithm/google_polyline_algorithm.dart'
    show decodePolyline;

extension PolylineExt on List<List<num>> {
  List<LatLng> unpackPolyline() =>
      map((p) => LatLng(p[0].toDouble(), p[1].toDouble())).toList();
}

You can then use the package and the above snippet by doing:

import '<code_snippet_path>'

decodePolyline('<encoded-polyline>').unpackPolyline(); // Returns `List<LatLng>` for a map polyline

Last updated

Was this helpful?