Skip to content

Instantly share code, notes, and snippets.

@shakthizen
Last active September 27, 2022 11:44
Show Gist options
  • Save shakthizen/e5fd6321615597f2979ada4e0dd73d95 to your computer and use it in GitHub Desktop.
Save shakthizen/e5fd6321615597f2979ada4e0dd73d95 to your computer and use it in GitHub Desktop.
Flutter Maps Animate to location

Refer https://github.com/fleaflet/flutter_map/blob/master/example/lib/pages/animated_map_controller.dart

void _animatedMapMove(LatLng destLocation, double destZoom) {
    // Create some tweens. These serve to split up the transition from one location to another.
    // In our case, we want to split the transition be<tween> our current map center and the destination.
    final latTween = Tween<double>(
        begin: mapController.center.latitude, end: destLocation.latitude);
    final lngTween = Tween<double>(
        begin: mapController.center.longitude, end: destLocation.longitude);
    final zoomTween = Tween<double>(begin: mapController.zoom, end: destZoom);

    // Create a animation controller that has a duration and a TickerProvider.
    final controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    // The animation determines what path the animation will take. You can try different Curves values, although I found
    // fastOutSlowIn to be my favorite.
    final Animation<double> animation =
        CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);

    controller.addListener(() {
      mapController.move(
          LatLng(latTween.evaluate(animation), lngTween.evaluate(animation)),
          zoomTween.evaluate(animation));
    });

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.dispose();
      } else if (status == AnimationStatus.dismissed) {
        controller.dispose();
      }
    });

    controller.forward();
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment