Nested navigation in Flutter

Introduction

Nested navigation helps you manage multiple screens inside a part of your app separately. It keeps navigation organized and easy to control.

When you have tabs and each tab has its own set of screens.

When you want to keep navigation inside a section without affecting the whole app.

When you want to go back only inside a part of your app, not the entire app.

When you want to reuse a navigation flow inside different parts of your app.

Syntax

Flutter

Navigator(
  key: navigatorKey,
  onGenerateRoute: (RouteSettings settings) {
    return MaterialPageRoute(
      builder: (context) => YourScreen(),
    );
  },
)

Use a unique GlobalKey to control the nested navigator.

onGenerateRoute defines how to build screens inside the nested navigator.

Examples

This example shows a nested navigator with two routes: home and details inside a tab.

Flutter

Navigator(
  key: _tabNavigatorKey,
  onGenerateRoute: (settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(builder: (_) => TabHomeScreen());
    } else if (settings.name == '/details') {
      return MaterialPageRoute(builder: (_) => TabDetailsScreen());
    }
    return null;
  },
)

Here we create a key to control the nested navigator and define a single screen route.

Flutter

final GlobalKey<NavigatorState> _nestedKey = GlobalKey<NavigatorState>();

Navigator(
  key: _nestedKey,
  onGenerateRoute: (settings) => MaterialPageRoute(builder: (_) => NestedScreen()),
)

Sample App

This app shows a main screen with a nested navigator inside the body. The nested navigator starts at NestedHome with a button. Pressing the button navigates inside the nested navigator to NestedDetails. The main app bar stays the same.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  final GlobalKey<NavigatorState> _nestedNavigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Nested Navigation Example')),
      body: Navigator(
        key: _nestedNavigatorKey,
        onGenerateRoute: (settings) {
          if (settings.name == '/') {
            return MaterialPageRoute(builder: (_) => NestedHome(onNext: () {
              _nestedNavigatorKey.currentState?.pushNamed('/details');
            }));
          } else if (settings.name == '/details') {
            return MaterialPageRoute(builder: (_) => NestedDetails());
          }
          return null;
        },
      ),
    );
  }
}

class NestedHome extends StatelessWidget {
  final VoidCallback onNext;
  NestedHome({required this.onNext});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: onNext,
        child: Text('Go to Details'),
      ),
    );
  }
}

class NestedDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Details Screen'),
    );
  }
}

Important Notes

Each nested navigator needs its own GlobalKey to manage its navigation stack.

Nested navigation keeps the main app navigation separate and clean.

Use nested navigation especially when you have tabs or sections with their own screens.

Summary

Nested navigation lets you manage screens inside a part of your app separately.

Use a Navigator widget with a unique key and onGenerateRoute inside your widget tree.

This helps keep navigation organized and user-friendly.

Practice

1. What is the main purpose of nested navigation in a Flutter app?

easy

A. To manage navigation inside a specific part of the app separately

B. To replace the main Navigator of the app

C. To create multiple apps inside one Flutter project

D. To disable navigation on certain screens

Solution

1. Step 1: Understand nested navigation concept

   Nested navigation allows managing navigation stacks inside a part of the app independently from the main app navigation.

2. Step 2: Identify the purpose

   This helps keep navigation organized and user-friendly by isolating navigation flows.

3. Final Answer:

   To manage navigation inside a specific part of the app separately -> Option A

4. Quick Check:

   Nested navigation = Manage part navigation separately [OK]

Hint: Nested navigation isolates navigation flows inside app parts [OK]

Common Mistakes:

• Thinking nested navigation replaces the main Navigator
• Confusing nested navigation with multiple apps
• Assuming nested navigation disables navigation

2. Which Flutter widget is essential to implement nested navigation?

easy

A. MaterialApp

B. Container

C. Scaffold

D. Navigator

Solution

1. Step 1: Identify widget for navigation

   The Navigator widget manages a stack of routes and is essential for navigation in Flutter.

2. Step 2: Confirm nested navigation use

   Nested navigation uses a Navigator with a unique key inside a widget subtree.

3. Final Answer:

   Navigator -> Option D

4. Quick Check:

   Navigator widget = navigation management [OK]

Hint: Navigator widget controls navigation stacks [OK]

Common Mistakes:

• Choosing MaterialApp which is for app-wide setup
• Selecting Scaffold which is for layout
• Picking Container which is a basic layout widget

3. Given this nested Navigator code snippet, what screen will be shown first inside the nested navigator?

Navigator(
  key: _nestedKey,
  onGenerateRoute: (settings) {
    return MaterialPageRoute(
      builder: (context) => NestedHomeScreen(),
    );
  },
)

medium

A. NestedHomeScreen

B. The main app's home screen

C. An error because onGenerateRoute is missing

D. A blank screen

Solution

1. Step 1: Analyze onGenerateRoute usage

   The onGenerateRoute callback returns a MaterialPageRoute with NestedHomeScreen as the builder.

2. Step 2: Determine initial screen

   Since this is the only route generated, NestedHomeScreen will be the first screen shown inside the nested Navigator.

3. Final Answer:

   NestedHomeScreen -> Option A

4. Quick Check:

   onGenerateRoute returns NestedHomeScreen [OK]

Hint: onGenerateRoute builder shows initial nested screen [OK]

Common Mistakes:

• Confusing main app screen with nested screen
• Assuming missing route causes error
• Expecting blank screen without routes

4. What is wrong with this nested Navigator code?

Navigator(
  onGenerateRoute: (settings) {
    return MaterialPageRoute(
      builder: (context) => NestedScreen(),
    );
  },
)

It causes navigation issues inside the app.

medium

A. Not wrapping Navigator inside a Scaffold

B. Using MaterialPageRoute instead of CupertinoPageRoute

C. Missing a unique key for the nested Navigator

D. Not defining initialRoute property

Solution

1. Step 1: Check Navigator setup

   For nested navigation, Navigator should have a unique GlobalKey to manage its own stack separately.

2. Step 2: Identify missing key

   This code lacks a key, which can cause navigation conflicts or unexpected behavior.

3. Final Answer:

   Missing a unique key for the nested Navigator -> Option C

4. Quick Check:

   Nested Navigator needs unique key [OK]

Hint: Always assign a unique key to nested Navigator [OK]

Common Mistakes:

• Thinking route type causes issues
• Believing Scaffold is mandatory for Navigator
• Assuming initialRoute is required

5. You want to create a tabbed interface where each tab has its own navigation stack. Which approach correctly implements nested navigation for this use case?

hard

A. Use a single Navigator for the whole app and switch tabs by pushing routes

B. Use a Navigator with a unique key inside each tab widget to manage its own stack

C. Use multiple MaterialApp widgets, one per tab

D. Use IndexedStack without any Navigator inside tabs

Solution

1. Step 1: Understand tab navigation needs

   Each tab should maintain its own navigation stack independently to allow back navigation inside tabs.

2. Step 2: Apply nested Navigator per tab

   Using a Navigator with a unique key inside each tab widget isolates navigation stacks correctly.

3. Step 3: Evaluate other options

   Single Navigator can't isolate stacks; multiple MaterialApps is heavy and incorrect; IndexedStack alone doesn't handle navigation.

4. Final Answer:

   Use a Navigator with a unique key inside each tab widget to manage its own stack -> Option B

5. Quick Check:

   Nested Navigator per tab = isolated stacks [OK]

Hint: Assign unique Navigator per tab for independent navigation [OK]

Common Mistakes:

• Using one Navigator for all tabs causing stack conflicts
• Trying multiple MaterialApps which is not recommended
• Ignoring Navigator inside tabs and losing navigation control