[FEATURE] Add animated movement

[ubatyrbekovfaq]

What do you want implemented?

Can you add animate to ? I have use moveTo function but it doesn't work smoothly I used open-source solutions, but they also have freezes

IMG_2946.MP4

What other alternatives are available?

flutter map animation is available but it doesn't work as supposed to be

Can you provide any other information?

No response

Severity

Minimum: Not required for my use

[TesteurManiak]

Can you be a bit more precise? What is exactly the expected result for you to consider it "smooth"? What "open-source solutions" have you tried? (asking because I'm the maintainer of flutter_map_animations and animating from point a to b has been working pretty well until now)
I don't think that an animateTo method is specifically needed in the core flutter_map repository to solve your issue.

[ibrierley]

You could use https://github.com/ibrierley/line_animator if any use.

[Hellomik2002]

You can reproduce issue, just create new key for maptile (use dataviz). Based on @TesteurManiak
It has very little shifts that can be visible when moving

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:path_provider/path_provider.dart';
import 'package:test/map_page.dart';
import 'package:test/my_home_page.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';

void main() {
  runApp(const MyApp());
}

Future<Style> readStyleMapFuture() async {
  final val = await StyleReader(
    uri: 'https://api.maptiler.com/maps/dataviz/style.json?key={key}',
    apiKey: '',
  ).read();
  styleMap = val;
  return val;
}

Style? styleMap;
Completer<Style> readStyleMapCompl = () {
  final completer = Completer<Style>();
  completer.complete(readStyleMapFuture());
  return completer;
}();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FutureBuilder(
          future: readStyleMapCompl.future,
          builder: (context, snap) {
            if (styleMap != null) {
              return MapPage(
                style: styleMap!,
              );
            }
            return const Scaffold(
              body: Center(
                child: CircularProgressIndicator(),
              ),
            );
          }),
    );
  }
}




const _startedId = 'AnimatedMapController#MoveStarted';
const _inProgressId = 'AnimatedMapController#MoveInProgress';
const _finishedId = 'AnimatedMapController#MoveFinished';
LatLng destLocation = const LatLng(43.236850, 76.956741);

class MapPage extends StatefulWidget {
  final Style style;

  const MapPage({
    required this.style,
    super.key,
  });

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> with SingleTickerProviderStateMixin {
  late AnimationController animationController;
  MapController mapController = MapController();
  late MapOptions mapOptions;

  @override
  void initState() {
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 100),
    );
    mapOptions = const MapOptions(
      initialCenter: LatLng(
        43.209653,
        76.816967,
      ),
      initialZoom: 16,
    );
    super.initState();
    _init();
  }

  void _init() async {
    Future(() {
      _animatedMapMove(
        destLocation: destLocation,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlutterMap(
        mapController: mapController,
        options: mapOptions,
        children: [
          VectorTileLayer(
            cacheFolder: getTemporaryDirectory,
            tileProviders: widget.style.providers,
            sprites: widget.style.sprites,
            theme: widget.style.theme,
            tileOffset: const TileOffset(zoomOffset: -3),
            concurrency: 4,
            maximumZoom: 15,
            layerMode: VectorTileLayerMode.vector,
          ),
          AnimatedBuilder(
            animation: animationController,
            builder: (context, _) {
              return PolylineLayer(
                polylines: [
                  Polyline(
                    points: [
                      const LatLng(
                        43.209653,
                        76.816967,
                      ),
                      LatLng(
                        mapController.camera.center.latitude,
                        mapController.camera.center.longitude,
                      ),
                    ],
                  )
                ],
              );
            },
          ),
        ],
      ),
    );
  }

  void _animatedMapMove({
    required LatLng destLocation,
  }) {
    // 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 camera = mapController.camera;

    final latTween = Tween<double>(
      begin: camera.center.latitude,
      end: destLocation.latitude,
    );
    final lngTween = Tween<double>(
      begin: camera.center.longitude,
      end: destLocation.longitude,
    );

    final zoomTween = camera.zoom;

    // Create a animation controller that has a duration and a TickerProvider.

    // The animation determines what path the animation will take. You can try different Curves values, although I found
    // fastOutSlowIn to be my favorite.

    final startIdWithTarget =
        '$_startedId#${destLocation.latitude},${destLocation.longitude},${camera.zoom}';
    bool hasTriggeredMove = false;
    animationController.addListener(() {
      final String id;
      if (animationController.value == 1.0) {
        id = _finishedId;
      } else if (!hasTriggeredMove) {
        id = startIdWithTarget;
      } else {
        id = _inProgressId;
      }

      hasTriggeredMove |= mapController.move(
        LatLng(
          latTween.evaluate(animationController),
          lngTween.evaluate(animationController),
        ),
        zoomTween,
        id: id,
      );
    });

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

    animationController.forward();
  }
}

[JaffaKetchup]

I'm closing this as it's been previously decided this form of animation is currently out of scope for FM core - if there's any reason to reconsider this, of course it can be changed - and it is becoming more of a report of a bug in the existing animation plugin.