Makes a convenient page class for PageRouteBuilder

[chunhtai]

We had MaterialPage class for MaterialPageRoute, and CupertinoPage class for CupertinoPageRoute, we should come up with a convenient page class for PageRouteBuilder. We don't have this before because we can't figure out how to handle the scope issue when using page class. The page class can't take in widget builder, otherwise it is very easy to break the widget tree during the page transition.

[xuanswe]

Regarding page transition, I have also problem when I swap pages. Currently, navigator only support transition when adding new page or removing a page. But if we have [PageA, PageB], then we want to change to [PageB, PageA], there will be no animation at all for now.

It would be nice, if swapping pages also being animated. Default should be cross fade, but of course configurable.

Use case for swapping pages is to use a single Navigator or Router with [PageA, PageB] as body for TabA and TabB in a BottomNavigationBar.

When we click TabB, we just need to swap the Navigator pages to [PageB, PageA] with FadeTransition on each page to make cross fade easily.

[chunhtai]

@nguyenxndaidev you can do that by giving it a different key, but they will be treated as new pages and lose all its state. If you want to reorder the page with the state and expecting page transition, that is a use case we didn't support. In our current design, page transition is only triggered when a new page is added or an existing page is removed.

[xuanswe]

@chunhtai

you can do that by giving it a different key, but they will be treated as new pages and lose all its state.

If I don't need to keep state, I don't need to use different key. I just need to change from [PageA] to [PageB] when click TabB.

In our current design, page transition is only triggered when a new page is added or an existing page is removed.

I think if flutter can support the transition when existing page is moved from/to top page, it will solve a lot of problems.
Currently, we need to implement a lot of boilerplate code just to animate pages without losing state. Not just that, we cannot make a cross fade transition because of the conflict between IndexedStack and AnimatedSwitcher (#56662, #48217).

[xuanswe]

Not only the problems mentioned above, assuming we combine complex nested navigators with IndexedStack and AnimatedSwitcher (or similar Transition widget), BottomNavigationBar and TabBar.

In this case, multiple animations will happens at the same time and out of control when we navigate to a new page, which requires to changes pages in nested navigators together with the change of another bottom tab and also another tab bar.

@chunhtai what's your opinion if we want to have all 3 things?

• simple solution to keep state without complexities and boilerplate code
• flexible and stable animation under our control
• cross fade should be easy without the need of fixing [animations] PageTransitionSwitcher doesn't work well with IndexedStack #56662, Animate changes to IndexedStack #48217.

IMHO, we really need to have a custom page, which allows to control animation when an existing page moving from/to top page and remove the need of AnimatedSwitcher (or similar Transition widget).
It also means that we just use multiple pages in a single navigator to keep state and remove the need of IndexedStack.

[nullrocket]

I have a similar use case, given the current API it is really easy to code yourself into this corner as it seems reasonable to keep state by rearranging the pages stack, losing animation makes it a dead end that isn't obvious. It's a shame because it takes a lot of work to get around. I would suggest adding a note to the documentation that moving pages doesn't trigger an animation on the top page to save others some headache.

[chunhtai]

This sounds like a broader subject, currently the page transition is tied to the route life cycle, for example, the exiting transition always end with route being disposed. It will be a big refactor.

Can you open a new issue to discuss this (i.e, apply page transition when reordering the pages)?

[xuanswe]

Can you open a new issue to discuss this (i.e, apply page transition when reordering the pages)?

@chunhtai #93958

[flutter-triage-bot]

This issue is marked P1 but has had no recent status updates.

The P1 label indicates high-priority issues that are at the top of the work list. This is the highest priority level a bug can have if it isn't affecting a top-tier customer or breaking the build. Bugs marked P1 are generally actively being worked on unless the assignee is dealing with a P0 bug (or another P1 bug). Issues at this level should be resolved in a matter of months and should have monthly updates on GitHub.

Please consider where this bug really falls in our current priorities, and label it or assign it accordingly. This allows people to have a clearer picture of what work is actually planned. Thanks!