CODEWITHSUNDEEP
flutterflutter-animation
John Doe
John Doe

Reputation: 174

PageView.animateToPage not working for elasticInOut Animation

I've a PageView with 3 pages(initial page:0). What I'm intending to do is to create a 3 section page with a back button which only displays if not in the initial page.
The code used to navigate to the other pages from initial page. (Working without issues)

pageController.animateToPage(1,
    duration: Duration(milliseconds: 500),
    curve: Curves.easeIn);
}),

[easeIn animation, 500ms duration]

The Code used for the back button

pageController.animateToPage(pageController.initialPage,
   duration: Duration(milliseconds: 500),
   curve: Curves.elasticInOut 
);

[elasticInOut animation, 500ms duration]

When trying to go back from page(2) to page(0) this won't work, however it works fine while going back from page(1) to page(0).

What Seems To Fix It?

So is this a known limitation of Flutter or am I doing something wrong?

Upvotes: 2

Views: 4049

Answers (3)

Alireza
Alireza

Reputation: 31

you can add physics: const BouncingScrollPhysics(), in page view . as friends said it is because of negative value . i hope it will help you.

Upvotes: 0

Gebes
Gebes

Reputation: 347

Setting the PageView scroll-behavior to Cupertino (which allows negative values) seems to fix the problem

PageView(
   controller: controller,
   scrollBehavior: CupertinoScrollBehavior(),
   children: [

Upvotes: 2

Nick Fisher
Nick Fisher

Reputation: 755

I think this happens with any curve that initially produces a negative value (like Curves.elasticInOut). I can't pinpoint the exact line (I suspect it's in applyUserOffset from ScrollPositionWithSingleContext), but negative values seem to be treated as if the animation has already completed. It may occasionally work with smaller/faster animations that produce values that are "less negative" (or close enough to zero).

Curves.linear or Curves.ease* don't produce negative values, so they should work consistently.

Upvotes: 2

Related Questions