Flutter PageView how to make faster animations on swipe

Question

I have a simple PageView:

PageView(
  controller: _pageController,
  physics: PlatformScrollPhysics.getPlatformScrollPhysics(),
  children: [
    Text("I am Text1"),
    Text("I am Text"),
  ],
  onPageChanged: (index) {
    print("page changed $index");
  },
);

What I would like to do is I want to make the page changing animation after a swipe is done by user faster. This happens when a user does a swipe and lifts off the finger, PageView snaps to the next page. This snapping currently takes around so much time, provides bad UX. However, there is no option to set the snapping animation speed and duration.

I have tried to add a listener:

_pageController.addListener(() {
      _pageController.position // this variable holds lots of information but yet I couldnt find what i looked for
      print("LISTENERRR ${_pageController.position}");
    }); 

Sadly, I couldnt find anything that can help me. I tried to overtake the swipe and make a custom swipe by calling

  _pageController.animateToPage(0, .. PARAMS);

for this to work, I need to detect when a page is about to change, so that I can overwrrite the animation with animateToPage method. Can I detect when a page is about to change in PageView? I am not interested in onPageChanged callback as it is late to overwrite the animation.

Answer 1

cs guy 's answer is right on track. Also credit to pskink .The PageView widget's transition speed isn't based on an animation curve even though the programmatic approach is.

PageView actually uses a Spring Simulation to handle the page transitions when used with swiping , so the "physics" property has to be overridden to change the "animation speed".

Here is a simple way to increase the "animation speed" by using custom Scroll Physics class.

import 'package:flutter/cupertino.dart';
import 'package:flutter/physics.dart';

class CustomPageViewScrollPhysics extends ScrollPhysics {
  const CustomPageViewScrollPhysics({ScrollPhysics parent})
      : super(parent: parent);

  @override
  CustomPageViewScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomPageViewScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 80,
        stiffness: 100,
        damping: 1,
      );
}

It can be used in the PageView constructor like this:

PageView(... physics: const CustomPageViewScrollPhysics(),)

And feel free to adjust any of the spring parameters!

Answer 2

You can do this:

class CustomPageViewScrollPhysics extends ScrollPhysics {
 const CustomPageViewScrollPhysics({ScrollPhysics? parent})
  : super(parent: parent);

 @override
 CustomPageViewScrollPhysics applyTo(ScrollPhysics? ancestor) {
   return CustomPageViewScrollPhysics(parent: buildParent(ancestor));
 }
 @override
 SpringDescription get spring => const SpringDescription(
  mass: 100,
  stiffness: 100,
  damping: 1,
 );
}