Flutter Adaptive Navigation, Scaffold Or TabScaffold

Fred Grott
3 min readDec 16, 2021

So I have a decision on whether to use Material Scaffold or Cupertino TabScaffold in Flutter Adaptive Navigation; thus why not let you into my head and what all goes on in making a such a dev and design decision.

Adaptive Navigation

So what is Adaptive Navigation? One of the problems with Material Design 1 and 2 with the increasing numbers of big screen device formats such as fold screens, Microsoft Surface devices, and iOStv along with AndroidTV is that fixed navigation for all screen sizes fails at usability.

Thus, with Material 3 we get adaptive navigation. On bigger screens, we transition from a bottom tabbed navigation to other drawer-side-panel navigation set-ups. And on mobile rather than the appbar having navigation it’s instead used for the page or content section title and any search box that may be needed.

Platform Scaffolds

Here in lies the problem, most package solutions that deliver material widgets to non-Apple devices and cupertino widgets to Apple devices use a platform widget that delivers Material Scaffold to non Apple devices and Cupertino TabScaffold to Apple devices.

And under adaptive navigation to complicate matters we lose the ability to do inFAB rail stuff where the FAB gets embedded in the mobile bottom tabbed bar and in the side drawer on bigger screens as FAB is only available on Material Scaffold.

First, let’s check on what the Cupertino Tab Scaffold does to make sure we are not violating any Apple HUI guidelines if we instead use the Material Scaffold.

Cupertino TabScaffold

Here is the Cupertino TabScaffold source code snippet:

The key seems to be the first set of comments:

Coordinates tab selection between a CupertinoTabBar and a CupertinoTabScaffold

Fred Grott