Nested navigation in Flutter - UI Render Trace

Component - Nested navigation

This UI component demonstrates nested navigation in a Flutter app. It shows how a main screen can have its own navigation stack inside a tab or section, allowing independent navigation flows within the app.

Widget Tree

Scaffold
├─ BottomNavigationBar
└─ IndexedStack
   ├─ Navigator (Home Tab)
   │  ├─ HomeScreen
   │  └─ DetailsScreen (optional)
   └─ Navigator (Settings Tab)
      ├─ SettingsScreen
      └─ ProfileScreen (optional)

The Scaffold is the main container with a BottomNavigationBar for switching tabs. The IndexedStack holds two Navigator widgets, each managing its own stack of screens for Home and Settings tabs. This allows each tab to keep its own navigation history.

Render Trace - 6 Steps

Step 1: Scaffold

Step 2: IndexedStack

Step 3: Navigator (Home Tab)

Step 4: Button on HomeScreen

Step 5: BottomNavigationBar

Step 6: Navigator (Settings Tab)

State Change - Re-render

Trigger:User taps the button on HomeScreen to navigate to DetailsScreen

Before

Home tab Navigator stack: [HomeScreen]

→

After

Home tab Navigator stack: [HomeScreen, DetailsScreen]

Re-renders:The Home tab Navigator subtree re-renders to show DetailsScreen.

UI Quiz - 3 Questions

What happens when the user taps the Settings tab in the bottom navigation bar?

A The app resets the Home tab navigation stack and shows the Settings tab.

B The app closes the Home tab Navigator.

C The app shows the Settings tab content and preserves the Home tab navigation stack.

D The app shows both Home and Settings tabs content at the same time.

Key Insight

Nested navigation in Flutter uses multiple Navigator widgets inside an IndexedStack to allow each tab or section to have its own independent navigation history. This approach improves user experience by preserving the state and navigation stack of each tab when switching between them.