Nested navigation in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ navigation

intermediate

Understanding Nested Navigator Widget

What will be the visible screen when this Flutter app runs?

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Navigator(
          onGenerateRoute: (settings) {
            return MaterialPageRoute(
              builder: (context) => Center(child: Text('Nested Screen')),
            );
          },
        ),
      ),
    );
  }
}

A A blank white screen with no text

B A screen showing the default MaterialApp home widget

C An error screen due to missing routes

D A screen showing the text 'Nested Screen' centered

💡 Hint

Look at what the Navigator's onGenerateRoute returns as the widget.

The Navigator widget creates a new navigation stack inside the Scaffold body. It builds a route that shows a centered text 'Nested Screen'. So the visible UI is that text centered on the screen.

❓ ui_behavior

intermediate

Behavior of Back Button in Nested Navigation

Given a nested Navigator inside a Scaffold, what happens when the Android back button is pressed if the nested Navigator has no pages to pop?

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Navigator(
          onGenerateRoute: (settings) {
            return MaterialPageRoute(
              builder: (context) => Center(child: Text('Only Page')),
            );
          },
        ),
      ),
    );
  }
}

A The back button pops the outer Navigator or closes the app if none

B The back button does nothing because nested Navigator handles it internally

C The back button pops the nested Navigator's only page and shows a blank screen

D The app closes because the nested Navigator cannot pop any page

💡 Hint

Think about how Flutter handles back button events when nested navigators cannot pop.

If the nested Navigator cannot pop any page, the back button event bubbles up to the outer Navigator or system. So the app will close or pop the outer route if any.

❓ lifecycle

advanced

State Preservation in Nested Navigators

In a Flutter app with a nested Navigator inside a tab, what happens to the nested Navigator's stack when switching tabs?

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  final List<Widget> _tabs = [
    Navigator(
      key: GlobalKey<NavigatorState>(),
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Scaffold(body: Center(child: Text('Tab 1 Root'))),
      ),
    ),
    Navigator(
      key: GlobalKey<NavigatorState>(),
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Scaffold(body: Center(child: Text('Tab 2 Root'))),
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: IndexedStack(
          index: _selectedIndex,
          children: _tabs,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: (index) => setState(() => _selectedIndex = index),
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Tab 1'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Tab 2'),
          ],
        ),
      ),
    );
  }
}

A The nested Navigator stack is lost and causes an error on return

B The nested Navigator stack resets to root when switching tabs

C The nested Navigator stack is preserved when switching tabs

D The nested Navigator stack duplicates pages when switching tabs

💡 Hint

Consider how IndexedStack keeps widgets alive in Flutter.

Using IndexedStack keeps the nested Navigators alive in memory, so their navigation stacks are preserved when switching tabs.

📝 Syntax

advanced

Correct Syntax for Nested Navigator with Routes

Which option correctly defines a nested Navigator with named routes in Flutter?

Flutter

import 'package:flutter/material.dart';

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

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

class NestedNavigator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      // ???
    );
  }
}

A initialRoute: '/home', onGenerateRoute: (settings) => MaterialPageRoute(builder: (context) => HomeScreen()),

B initialRoute: '/home', routes: {'/home': (context) => HomeScreen(), '/details': (context) => DetailsScreen()},

C routes: {'/home': (context) => HomeScreen(), '/details': (context) => DetailsScreen()}, onGenerateRoute: (settings) => null,

D onGenerateRoute: (settings) => MaterialPageRoute(builder: (context) => HomeScreen()), routes: {'/home': (context) => HomeScreen()},

💡 Hint

Check the Navigator constructor parameters for named routes and initialRoute.

Navigator accepts initialRoute and routes map to define named routes. Option B correctly uses both.

🔧 Debug

expert

Debugging Nested Navigator State Loss

A Flutter app uses nested Navigators inside tabs. When switching tabs, the nested Navigator loses its navigation stack and resets to root. What is the most likely cause?

A Using a new GlobalKey for the nested Navigator each time the tab builds

B Keeping the nested Navigator widgets alive with AutomaticKeepAliveClientMixin

C Using IndexedStack to hold tab views instead of switching widgets directly

D Using MaterialApp instead of Navigator for nested navigation

💡 Hint

Think about how Flutter identifies widgets and preserves their state.

Using a new GlobalKey each time rebuilds the Navigator widget, causing state loss. The key must be stable to preserve navigation stack.