Flutter Map Animations

Animation utility for the flutter_map package.

You can try the example app here.

Table of Contents

• Documentation
  • AnimatedMapController
    • Animated Movement
  • AnimatedMarkerLayer & AnimatedMarker
• Migration Guide
  • v0.4.0
• Contributors

Documentation

AnimatedMapController

Just create an AnimatedMapController and you're good to go:

class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
    late final _animatedMapController = AnimatedMapController(vsync: this);

    // ...
}

You can specify the animation duration and curve:

AnimatedMapController(
    vsync: this,
    duration: const Duration(milliseconds: 500),
    curve: Curves.easeInOut,
);

And add it to your FlutterMap widget:

FlutterMap(
    mapController: _animatedMapController.mapController,
    // ...
)

Animated Movement

All those methods are accessible from the AnimatedMapController:

• animateTo({LatLng? dest, double? zoom, double? rotation, Curve? curve})
• animatedRotateFrom(double degree, {Curve? curve})
• animatedRotateTo(double degree, {Curve? curve})
• animatedRotateReset({Curve? curve})
• animatedZoomTo(double newZoom, {Curve? curve})
• animatedZoomIn({Curve? curve})
• animatedZoomOut({Curve? curve})
• centerOnPoint(LatLng point, {double? zoom, Curve? curve})
• centerOnPoints(List<LatLng> points, {FitBoundsOptions? options, Curve? curve})
• animatedFitBounds(LatLngBounds bounds, {FitBoundsOptions? options, Curve? curve})

AnimatedMarkerLayer & AnimatedMarker

FlutterMap(
    mapController: _animatedMapController.mapController,
    children: [
        TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
        ),
        AnimatedMarkerLayer(
            markers: [
                AnimatedMarker(
                    point: LatLng(51.509364, -0.128928),
                    builder: (_, __) => Icon(Icons.location_on),
                ),
            ],
        ),
    ],
)

Migration Guide

v0.4.0

• With flutter_map v5 it's not possible anymore to extend MapControllerImpl which was used to use the AnimatedMapController directly as a MapController in the FlutterMap widget. Now an instance of MapController is created internally or can be passed as a parameter to the AnimatedMapController constructor. You can access it with the mapController getter:

late final _animatedMapController = AnimatedMapController(vsync: this);

@override
Widget build(BuildContext context) {
    return FlutterMap(
        mapController: _animatedMapController.mapController,
        // ...
    );
}

Contributors

Guillaume Roux

Rory Stephenson