google_map_animation 0.0.1
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.
⚠️ 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 #


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 animationdelayEnd
: 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