Niklas Raab
Niklas Raab

Reputation: 1736

How to animate container movement with Android scroll behavior in Flutter?

My goal is, to have a container who can be dragged around in the vertical axis. After removing the finger the container should move a bit forward with the velocity I had after ending the touch. I want to have the exact same animation/feeling after you stop scrolling on an android phone and it continues to scroll a little bit further.

This is what it looks so far:

enter image description here

This is my code:

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  double _offeset = 0;

  double get offset => _offeset;

  set offset(double offeset) {
    if(offeset < 500)
    setState(() {
      _offeset = offeset;
    });
  }

  AnimationController controller;
  ClampingScrollSimulation simulation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, upperBound: 5)
      ..addListener(() {
        offset += controller.value;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
            top: offset,
            left: 0,
            right: 0,
            child: GestureDetector(
              onVerticalDragUpdate: (DragUpdateDetails details) {
                offset += details.delta.dy;
              },
              onVerticalDragEnd: (DragEndDetails details) {
                simulation = ClampingScrollSimulation(
                   position: 0, velocity: details.primaryVelocity,
                );
                controller.animateWith(simulation);
              },
              child: Container(height: 50, width: 50, color: Colors.red),
            ),
          ),
        ],
      ),
    );
  }
}

The problem is, that this is not the Android scroll animation and I don't know how to get it. (It feels like the animation is linear, stops too early and doesn't take advantage of the velocity parameter) I am even using the ClampingScrollSimulation class, which is used in all Scroll widgets in Flutter to simulate Android scrolling.

Upvotes: 1

Views: 1241

Answers (1)

Niklas Raab
Niklas Raab

Reputation: 1736

The solution was to multiply the _controller.value with _controller.velocity. Like this:

offset += controller.value * _controller.velocity / 100;

Upvotes: 1

Related Questions