How to avoid jank (laggy animation) during page transition in Flutter-CodePudding

I have two pages, Page A and Page B. To do transition from Page A to Page B I use Navigation.push():

  Navigator.push(
    context,
    CupertinoPageRoute(...)
  );

However, this transition has so much jank and frame drops. (yes, I run in Profile mode)

One reason I think of is Page B has so much heavy-duty UI rendering (such as Google Maps and Charts) and I also noticed as page slide animation is happening, Page B rendering has already begun.

I'm trying to understand how I can improve this experience and maybe somehow pre-load Page B.

I already read this suggestion from a Github issue (tldr use Future.microtask(()) but it didn't work for me. Would appreciate any help or suggestion.

CodePudding user response：

Try adding a small delay before loading the initial tasks in page B. Maybe with a Future.delayed()

CodePudding user response：

  Navigator.push(
    context,
    transitionDuration: Duration(milliseconds: 100),
    CupertinoPageRoute(...)
  );

Use TransitionDuration : Duration(milliseconds: 100) For Slow , For faster Make the Value increase TransitionDuration : Duration(milliseconds: 1000).