Polyline Animator

A Flutter package for animating polylines on Google Maps, designed and developed by Michael Valdiviezo.

Features

• Animated Polylines: Smoothly animates the drawing of polylines on Google Maps.
• Customizable: Easily customize the color and width of the polylines and their background.
• Dynamic Updates: Supports dynamic updates and real-time animations.

Getting started

Prerequisites

To use this package, you need to configure your project to use Google Maps. Follow these steps to set up your API key.

Step 1: Get an API Key

Visit the Google Cloud Platform Console to get an API key. Make sure to enable the Maps SDK for Android and Maps SDK for iOS.

Step 2: Add the API Key to Your Project

Android

1. Open the android/app/src/main/AndroidManifest.xml file.
2. Add the following inside the <application> tag, but before the <activity> tag:

Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Polyline Animator Example'),
        ),
        body: const PolylineAnimationExample(),
      ),
    );
  }
}

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

  @override
  _PolylineAnimationExampleState createState() =>
      _PolylineAnimationExampleState();
}

class _PolylineAnimationExampleState extends State<PolylineAnimationExample> {
  final PolylineAnimator _animator = PolylineAnimator();
  final Map<PolylineId, Polyline> _polylines = {};
  GoogleMapController? _controller;

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: (controller) {
        _controller = controller;
        _startPolylineAnimation();
      },
      polylines: _polylines.values.toSet(),
      initialCameraPosition: const CameraPosition(
        target: LatLng(37.42796133580664, -122.085749655962),
        zoom: 15,
      ),
    );
  }

  //To start animating a polyline, you can get the coordinates from your database.
  
  void _startPolylineAnimation() {
    List<LatLng> points = [
      const LatLng(37.42796133580664, -122.085749655962),
      const LatLng(37.42846133580664, -122.086749655962),
      const LatLng(37.42946133580664, -122.087749655962),
      const LatLng(37.43046133580664, -122.088749655962),
      const LatLng(37.43146133580664, -122.089749655962),
      const LatLng(37.43246133580664, -122.090749655962),
      const LatLng(37.43346133580664, -122.091749655962),
      const LatLng(37.43446133580664, -122.092749655962),
      const LatLng(37.43546133580664, -122.093749655962),
      const LatLng(37.43646133580664, -122.094749655962),
      const LatLng(37.43746133580664, -122.095749655962),
      const LatLng(37.43846133580664, -122.096749655962),
      const LatLng(37.43946133580664, -122.097749655962),
      const LatLng(37.44046133580664, -122.098749655962),
      const LatLng(37.44146133580664, -122.099749655962),
      const LatLng(37.44246133580664, -122.100749655962),
      const LatLng(37.44346133580664, -122.101749655962),
      const LatLng(37.44446133580664, -122.102749655962),
      const LatLng(37.44546133580664, -122.103749655962),
      const LatLng(37.44646133580664, -122.104749655962),
      const LatLng(37.44746133580664, -122.105749655962),
      const LatLng(37.44846133580664, -122.106749655962),
      const LatLng(37.44946133580664, -122.107749655962),
      const LatLng(37.45046133580664, -122.108749655962),
      const LatLng(37.45146133580664, -122.109749655962),
      const LatLng(37.45246133580664, -122.110749655962),
      const LatLng(37.45346133580664, -122.111749655962),
      const LatLng(37.45446133580664, -122.112749655962),
    ];

    _animator.animatePolyline(
      points,
      'polyline_id',
      Colors.blue,
      const Color.fromARGB(255, 164, 207, 240),
      _polylines,
      () {
        setState(() {});
      },
    );
  }

  @override
  void dispose() {
    _animator.dispose();
    super.dispose();
  }
}