flutter_map_animations 0.2.0 copy "flutter_map_animations: ^0.2.0" to clipboard
flutter_map_animations: ^0.2.0 copied to clipboard

Animation utility for the flutter_map package.

Flutter Map Animations #

Pub Version

Animation utility for the flutter_map package.

You can try the example app here.

AnimatedMapController #

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

class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
    late final _mapController = 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: _mapController,
    // ...
)

Animated Movement #

All those methods are accessible from the AnimatedMapController:

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

AnimatedMarkerLayer & AnimatedMarker #

FlutterMap(
    mapController: _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),
                ),
            ],
        ),
    ],
)