Using Flutter's Cupertino widgets, how do I trigger a horizontal page transition on top of bottom tab bars

Question

Instead of a common horizontal page transition inside of one of the tabs or a common vertical page transition on top of the tab bar, how can I push in a page transition horizontally and on top of the tab bar?

This is commonly seen in Chinese platform type apps.

Solution

Warning: it's achievable in iOS but isn't necessarily a good information architecture for an app and not recommended by Apple's Human Interface Guidelines.

See the App Architecture's Navigation section and the Bars' Tab Bars section.

Use a tab bar to present peer categories of content or functionality. A tab bar lets people quickly and easily switch between categories, regardless of the current location.

and

In general, use a tab bar to organize information at the app level. A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or modes at once.

In Flutter, the common iOS parallel navigation patterns of horizontal page transitions inside each tab is achieved by letting each tab have its own Navigator and navigation stack via CupertinoTabViews.

To undo that pattern and have horizontal page transitions above the tabs, do not insert CupertinoTabViews as the root child of each tab. This will remove the parallel navigation pattern commonly seen in iOS.

Then trigger a normal route push via:

Navigator.of(context).push(CupertinoPageRoute<void>(
  builder: (BuildContext context) => ...,
);

or something similar.

Comments

[Nicholas Jela]

hi,sir. You mentioned do not insert Cupertinotabview as root navigator. then using what?My Home is exactly 4 CupertinoTabView switch with CupertinoTabScaffold and CupertinoTabBar.

[Timotej Leginus]

You said to remove CupertinoTabViews as the root child of each tab, but then how do I transition to the page? I use a tabBuilder and it needs to return the child tab, I can't even Navigator#push to it. It doesn't even show any animation on the page