Independent Stacks per Tab

DeclarativeTabsScaffold keeps each tab's page list independent while preserving declarative updates. Updating one tab does not replace another tab's stack.

Next: Back Handling Back to Overlays

Tab-local page lists

Organize Map<TabId, List<PageEntry>> for predictable tab navigation state. Store a separate page list for every TabId.

Per-screen overlays

Choose TabPageKey = (TabId, pageKey) to scope overlay state for each tab screen. The compound key prevents one screen's overlay state from leaking into another screen.

Consistent back order

Handle back actions in this order: dismiss the overlay, pop the selected tab's stack, return to the first tab, and then call onBackAtRoot. Maintain this order the same across all tabs.

Tabs Scaffold Pattern

Prepare a root page for every tab and route all tab events through state updates. Pass the complete pagesByTab map to DeclarativeTabsScaffold.

Tab Overlay Map

DeclarativeTabsScaffold

const tabHome = TabId('home');
const tabSettings = TabId('settings');

final pagesByTab = <TabId, List<PageEntry>>{
  tabHome: [const PageEntry(key: 'home', name: '/home')],
  tabSettings: [const PageEntry(key: 'settings', name: '/settings')],
};

return DeclarativeTabsScaffold(
  items: items,
  currentTab: currentTab,
  onSelectTab: _selectTab,
  pagesByTab: pagesByTab,
  setPagesForTab: _setPagesForTab,
  buildPage: _buildTabPage,
);

Constraint

For each tab,. pagesByTab[tab] must stay non-empty must stay non-empty. A root page is required for stable navigation behavior.

Overlays

Back Handling