google_map_animation 0.0.1 copy "google_map_animation: ^0.0.1" to clipboard
google_map_animation: ^0.0.1 copied to clipboard

A Flutter library for creating animated polylines and markers on Google Maps with smooth transitions and customizable effects.

Google Map Animation #

A Flutter library for creating smooth, customizable polyline and marker animations directly on Google Maps. Bring your maps to life with beautiful animations that enhance user experience.

Pub Version Flutter Dart

⚠️ Important Note #

This library focuses exclusively on animating polylines and markers on Google Maps. Google Maps configuration and setup is out of scope for this library. Before using this library, please ensure you have properly configured Google Maps in your Flutter project.

For Google Maps setup instructions, refer to the official Google Maps Flutter documentation.

GIF #

Marker Animation      Polyline Animation

Features #

Animated Polylines: Create smooth polyline animations with delay

🎯 Marker Animation: Smooth marker transitions with customizable duration

Performance: Optimized for smooth animations

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  google_map_animation: ^1.0.0

Then run:

flutter pub get

Usage #

Basic Setup #

import 'package:google_map_animation/google_map_animation.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> with TickerProviderStateMixin {
  GoogleMapController? mapController;
  MapAnimationController? mapAnimationController;

  @override
  void dispose() {
    mapAnimationController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: (controller) {
        mapController = controller;
        mapAnimationController = MapAnimationController(
          mapId: controller.mapId,
          vsync: this,
        );
      },
      initialCameraPosition: CameraPosition(
        target: LatLng(23.0181, 72.5897),
        zoom: 14.0,
      ),
    );
  }
}

Polyline Animations #

Fade In Progressive Animation

Gradually increases opacity and then progressively draws the polyline:

final animatedPolyline = AnimatedPolyline(
  polyline: Polyline(
    polylineId: PolylineId('fade_route'),
    points: routeCoordinates,
    color: Colors.red,
    width: 5,
  ),
  polylineAnimator: FadeInProgressiveAnimator(
    duration: Duration(seconds: 5),
    curve: Curves.ease,
    repeat: true,
    delayStart: Duration(milliseconds: 500),
    delayEnd: Duration(milliseconds: 1000),
  ),
);

mapAnimationController?.updatePolylines({animatedPolyline});

Marker Animation #

Animate markers with smooth transitions:

// Add markers with animation
final markers = <Marker>{
  Marker(
    markerId: MarkerId('marker_1'),
    position: LatLng(23.0181, 72.5897),
    infoWindow: InfoWindow(title: 'Point 1'),
  ),
  Marker(
    markerId: MarkerId('marker_2'),
    position: LatLng(23.0220, 72.5950),
    infoWindow: InfoWindow(title: 'Point 2'),
  ),
};

mapAnimationController?.updateMarkers(markers);

Animation Properties #

PolylineAnimator Properties #

All animators inherit from PolylineAnimator and support these properties:

  • duration: Animation duration (default: varies by animator)
  • curve: Animation curve (default: Curves.linear)
  • repeat: Whether to repeat the animation (default: false)
  • repeatCount: Number of times to repeat (null = infinite)
  • reverse: Whether to reverse the animation (default: false)
  • delayStart: Delay before starting the animation
  • delayEnd: Delay after ending the animation

MapAnimationController Properties #

The MapAnimationController is the main controller for managing polyline and marker animations. Here are its key properties and methods:

Constructor Parameters

  • mapId: Unique identifier for the map (required)
  • vsync: TickerProvider for animation synchronization (required)
  • markers: Initial set of markers (optional, default: empty set)
  • polylines: Initial set of animated polylines (optional, default: empty set)
  • markersAnimationDuration: Duration for marker transitions (default: 2000ms)
  • markerListener: Callback for marker updates (optional)

Available Animators #

Animator Description Use Case
SnackAnimator Progressive drawing and erasing Route tracing, snake-like effects
FadeInProgressiveAnimator Opacity fade + progressive drawing Smooth route appearance
ColorTransitionAnimation Color transitions between multiple colors Dynamic route highlighting

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.


Made with ❤️ by Manish Relani for the Flutter community

If this library helped you, please give it a ⭐ on GitHub

5
likes
150
points
34
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter library for creating animated polylines and markers on Google Maps with smooth transitions and customizable effects.

Repository (GitHub)
View/report issues

Topics

#map-animation #animated-markers #animated-polylines #animated-bearings

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, google_maps_flutter_platform_interface

More

Packages that depend on google_map_animation