Ripple effect of buttons still playing when getting back to screen

Question

I have a simple app with elevated buttons, which push other screens to the Navigator when pressed. When I press a Button on Screen A, Screen B opens. Now, when I go back to Screen A, by poping the Navigator, you can see how the ripple effect on the originally pressed button is still playing for some ms. ChatGPT says, it's because the screen will be restored with its state of animations, but how to prevent this? It's making the app look a little bit buggy.

Answer 1

To fix this issue, set the allowSnapshotting parameter of the origin route's MaterialPage or CupertinoPage to false.

According to the documentation, when allowSnapshotting is set to true (which is the default), the origin route’s animations are paused during navigation to a new route and resume when returning back to the original route.

In your case, the ripple animation is interrupted when you navigate away, and it resumes when you return, which causes the animation to appear frozen.

Here's a relevant quote from the documentation:

Generally this means that animations that occur on the entering/exiting route while the route animation plays may appear frozen - unless they are a hero animation or something that is drawn in a separate overlay.