Flutter_map: Fling animation can be more fluid

[aytunch]

I am not talking about dragging(pan). While dragging, the map is fluid. However while swiping(pan), like a fast flicker of finger, the map moves in an unnatural way. Seems too much acceleration. We can do it like Apple Maps or Google maps swipe gesture. If I am not wrong, this could be solved by altering the swipe gesture. Damping and Curves.

[johnpryan]

Yep, I think I agree that this is slightly unnatural, at least on iOS. (Android users might feel differently). The fling animation is here: https://github.com/johnpryan/flutter_map/blob/1d048608ab0ab6daf716b3c4b20db7a62cc44536/lib/src/gestures/gestures.dart#L20 and is using the AnimationController.fling() function from the flutter framework.

[aytunch]

@johnpryan @lpongetti There has been some great contributions in the past days to flutter_map by you two. I really think that the Fling gesture is very un natural at the moment. It is as if the animation accelerates instead of decelerating. I use Google maps, Apple maps, yandex maps on iOS and all of them behave the same way when it comes to fling(swipe/throw) gesture animation. But Flutter map behaves differently. Thanks

[lpongetti]

I'll see when i'll have some time

[lpongetti]

I read the code and at first look i think that can be the duration... its never setted. It have to be proportioned by velocity. but i have to try.. monday

[aytunch]

@lpongetti Sounds great, thanks. Now that you pointed out a hint about duration, I looked at the code and it seems the author records the magnitude of the fling gesture and calculates the new center according to it. And then makes a linear tween to that new center. In other gestures like double tap author used Curves.fastOutSlowIn. But I couldn't see something like that for fling animation. Maybe that is what causes the unnatural animation along with no duration. Good luck since it seems too much math:D What I realized after looking at other map apps, Their fling animations decelerate much quicker, and don't go too far away unless it is a very big fling. Ours moves a lot even when a small fling distance is made by the finger

[lpongetti]

Surely the distance and duration are wrong. Fling animation sounds good.. but i dont know... Monday i will look for a solution

[lpongetti]

i tried to remove fling animation and i added CurvedAnimation with Curves.decelerate.
i have pixel per seconds and i have to calculate the duration and end offset.
with the right duration and offset the animation will have at the start the same speed of touch.

unfortunately I'm not a mathematician and i don't know how to compute them.

if you want you can try

```dart
var magnitude = details.velocity.pixelsPerSecond.distance;
if (magnitude < _kMinFlingVelocity) {
return;
}

Animation<double> animation =
    CurvedAnimation(parent: _controller, curve: Curves.decelerate);

_flingAnimation = Tween<Offset>(
  begin: _flingOffset,
  end: _flingOffset - (details.velocity.pixelsPerSecond / xxx),
).animate(animation);

_controller
  ..value = 0.0
  ..duration = Duration(milliseconds: xxx)
  ..forward();

````

[aytunch]

I just found out about a great library named Flutter-Flick: https://github.com/aliyigitbireroglu/flutter-flick

I believe This package takes away the need of math calculations and results in a natural Fling gesture. Do you guys think we can implement this inside Flutter_Map? @johnpryan @lpongetti @aliyigitbireroglu

[johnpryan]

I think a simpler solution might be to use AnimationController.animateWith and use a physics simulation: https://github.com/flutter/samples/blob/master/animations/lib/src/misc/physics_card_drag.dart#L70

[aliyigitbireroglu]

The Flick library has a very simple logic: First, of course, it moves the widget according to the drag gestures. When these gestures end, it calculates the imminent displacement based on the velocity of the DragEndDetails. Then, it creates a CurvedAnimation tween based on the calculated displacement using Curves.decelerate. Finally, it moves the widget with this animation.

I haven't had the chance of looking at the code of Flutter_Map yet but I hope you can implement Flick directly. If not, I would be glad to contribute:) I will see the code as soon as I can.

[RyanRamchandar]

Any updates on this?