Add a Polyline in Flutter

This tutorial shows how to draw polylines (lines connecting multiple points) on your MapMetrics Flutter map. Polylines are useful for showing routes, paths, or borders.

Prerequisites

Before you begin, ensure you have:

• Completed the Flutter Setup Guide
• A MapMetrics API key and style URL from the MapMetrics Portal

Basic Polyline

Draw a simple polyline by providing a list of LatLng points:

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

class PolylineExampleScreen extends StatefulWidget {
  @override
  _PolylineExampleScreenState createState() => _PolylineExampleScreenState();
}

class _PolylineExampleScreenState extends State<PolylineExampleScreen> {
  MapMetricsController? mapController;

  final Set<Polyline> polylines = {
    Polyline(
      polylineId: PolylineId('paris_route'),
      points: [
        LatLng(48.8589, 2.3398),
        LatLng(48.8566, 2.3491),
        LatLng(48.8547, 2.3539),
        LatLng(48.8519, 2.3610),
        LatLng(48.8483, 2.3589),
        LatLng(48.8516, 2.3505),
        LatLng(48.8540, 2.3434),
        LatLng(48.8573, 2.3386),
        LatLng(48.8579, 2.3344),
        LatLng(48.8590, 2.3399),
      ],
      color: Colors.red,
      width: 4,
    ),
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Polyline Example')),
      body: MapMetrics(
        styleUrl: 'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(48.8540, 2.3470),
          zoom: 14.0,
        ),
        polylines: polylines,
      ),
    );
  }
}

Styled Polylines

Customize the look of your polylines with color, width, and patterns:

final Set<Polyline> styledPolylines = {
  // Solid thick line
  Polyline(
    polylineId: PolylineId('thick_line'),
    points: [
      LatLng(48.860, 2.330),
      LatLng(48.855, 2.345),
      LatLng(48.850, 2.360),
    ],
    color: Colors.blue,
    width: 6,
  ),
  // Dotted line
  Polyline(
    polylineId: PolylineId('dotted_line'),
    points: [
      LatLng(48.858, 2.330),
      LatLng(48.853, 2.345),
      LatLng(48.848, 2.360),
    ],
    color: Colors.orange,
    width: 3,
    patterns: [PatternItem.dot],
  ),
  // Dashed line
  Polyline(
    polylineId: PolylineId('dashed_line'),
    points: [
      LatLng(48.856, 2.330),
      LatLng(48.851, 2.345),
      LatLng(48.846, 2.360),
    ],
    color: Colors.green,
    width: 3,
    patterns: [PatternItem.dash(20), PatternItem.gap(10)],
  ),
};

Multiple Routes

Show several routes with different colors:

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

class MultipleRoutesScreen extends StatefulWidget {
  @override
  _MultipleRoutesScreenState createState() => _MultipleRoutesScreenState();
}

class _MultipleRoutesScreenState extends State<MultipleRoutesScreen> {
  MapMetricsController? mapController;

  final Set<Polyline> routes = {
    // Route 1: New York → Philadelphia → Washington DC
    Polyline(
      polylineId: PolylineId('east_coast'),
      points: [
        LatLng(40.7128, -74.0060), // New York
        LatLng(39.9526, -75.1652), // Philadelphia
        LatLng(38.9072, -77.0369), // Washington DC
      ],
      color: Colors.blue,
      width: 4,
    ),
    // Route 2: Los Angeles → Las Vegas → Phoenix
    Polyline(
      polylineId: PolylineId('southwest'),
      points: [
        LatLng(34.0522, -118.2437), // Los Angeles
        LatLng(36.1699, -115.1398), // Las Vegas
        LatLng(33.4484, -112.0740), // Phoenix
      ],
      color: Colors.red,
      width: 4,
    ),
  };

  // Markers at each city
  final Set<Marker> cityMarkers = {
    Marker(
      markerId: MarkerId('nyc'),
      position: LatLng(40.7128, -74.0060),
      infoWindow: InfoWindow(title: 'New York'),
    ),
    Marker(
      markerId: MarkerId('philly'),
      position: LatLng(39.9526, -75.1652),
      infoWindow: InfoWindow(title: 'Philadelphia'),
    ),
    Marker(
      markerId: MarkerId('dc'),
      position: LatLng(38.9072, -77.0369),
      infoWindow: InfoWindow(title: 'Washington DC'),
    ),
    Marker(
      markerId: MarkerId('la'),
      position: LatLng(34.0522, -118.2437),
      infoWindow: InfoWindow(title: 'Los Angeles'),
    ),
    Marker(
      markerId: MarkerId('vegas'),
      position: LatLng(36.1699, -115.1398),
      infoWindow: InfoWindow(title: 'Las Vegas'),
    ),
    Marker(
      markerId: MarkerId('phoenix'),
      position: LatLng(33.4484, -112.0740),
      infoWindow: InfoWindow(title: 'Phoenix'),
    ),
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Multiple Routes')),
      body: MapMetrics(
        styleUrl: 'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
        onMapCreated: (MapMetricsController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(37.0902, -95.7129), // Center of USA
          zoom: 4.0,
        ),
        polylines: routes,
        markers: cityMarkers,
      ),
    );
  }
}

Polyline Properties

Property	Type	Description
polylineId	PolylineId	Unique identifier for the polyline
points	List<LatLng>	List of coordinates that form the line
color	Color	Line color (default: black)
width	int	Line width in pixels (default: 10)
patterns	List<PatternItem>	Dash/dot/gap pattern for the line
geodesic	bool	If true, line follows Earth's curvature
visible	bool	Whether the polyline is visible
zIndex	int	Drawing order relative to other overlays

Next Steps

• Add a Polygon — Draw filled shapes on the map
• Draw a Circle — Draw circular areas
• Add a Popup — Show popups on markers

---

Tip: Combine polylines with markers at key points to create an interactive route map. Use geodesic: true for long-distance routes so the line follows the curvature of the Earth.