google_map_dotted_polygon 0.0.1

A Flutter package to draw dotted or dashed polygons on Google Maps. Supports customizable color, gap, and stroke width for flexible styling of map zones and routes.

example/lib/main.dart

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_map_dotted_polygon/google_map_dotted_polygon.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MapExample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MapExample extends StatefulWidget {
  const MapExample({super.key});

  @override
  State<MapExample> createState() => _MapExampleState();
}

class _MapExampleState extends State<MapExample> {
  final Completer<GoogleMapController> _controller = Completer();
  final Set<Polyline> _polylines = {};
  final CameraPosition _initialCamera = const CameraPosition(
    target: LatLng(11.57, 104.90),
    zoom: 12,
  );

  final List<LatLng> toulKorkPoints = [
    LatLng(11.590461201325226, 104.89694609018666),
    LatLng(11.58610369496405, 104.90035914072371),
    LatLng(11.583117803135286, 104.9074572905893),
    LatLng(11.574534476715868, 104.90463071669102),
    LatLng(11.570451223676981, 104.90641878531095),
    LatLng(11.557700949071673, 104.90823398072956),
    LatLng(11.548308655431223, 104.89849643256107),
    LatLng(11.59076188575557, 104.89731103007699),
  ];

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

  void _loadPolygon() {
    final polygon = GoogleMapDottedPolygon.createDottedPolygon(
      points: toulKorkPoints,
      color: Colors.red,
      gap: 0.0003,
      width: 2,
    );
    _polylines.addAll(polygon);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dotted Polygon Example')),
      body: GoogleMap(
        initialCameraPosition: _initialCamera,
        onMapCreated: (controller) => _controller.complete(controller),
        polylines: _polylines,
        zoomControlsEnabled: false,
        gestureRecognizers: {Factory(() => EagerGestureRecognizer())},
      ),
    );
  }
}