Skip to content

Path hierarchy

Tom Gilder edited this page Aug 21, 2021 · 1 revision

Path hierarchy affects where page are displayed. The best example of this is with dialogs and tabs.

Here is a routing table with two tabs, and a two dialog routes:

'/tabs': (_) => CupertinoTabPage(
          child: HomePage(),
          paths: ['/tabs/feed', '/tabs/settings'],
        ),
'/tabs/feed': (_) => MaterialPage(child: FeedPage()),
'/tabs/settings': (_) => MaterialPage(child: SettingsPage()),

// Dialog route one
'/tabs/dialog': (_) => DialogPage(),

// Dialog route two
'/tabs/feed/dialog': (_) => DialogPage(),

When showing /tabs/feed/dialog, the dialog will be inserted between the tab and feed pages.

It will cover the feed page, but not the tab bar:

Screenshot%202021-08-21%20at%2011 30 44

If you want to show the dialog over the tab bar too, you need to use /tabs/dialog:

Screenshot%202021-08-21%20at%2011 30 17
Clone this wiki locally