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.

Answer 1

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.