Nested navigation in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a nested Navigator widget.

Flutter

Navigator(
  key: [1],
  onGenerateRoute: (settings) {
    return MaterialPageRoute(builder: (context) => HomeScreen());
  },
)

Drag options to blanks, or click blank then click option'

AnavigatorKey

BnestedKey

CkeyNavigator

DnavKey

Attempts:

3 left

💡 Hint

Common Mistakes

Using an undefined variable name for the key.

Omitting the key parameter.

The Navigator widget requires a key to manage its state. The common name is 'navigatorKey'.

2fill in blank

medium

Complete the code to push a new route inside the nested navigator.

Flutter

navigatorKey.currentState?.[1](MaterialPageRoute(builder: (_) => DetailScreen()));

Drag options to blanks, or click blank then click option'

Apush

Bpop

Creplace

DpopAndPushNamed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pop' instead of 'push' to navigate forward.

Using 'popAndPushNamed' without named routes.

To navigate to a new screen inside a Navigator, use the push method.

3fill in blank

hard

Fix the error in the nested navigator's route generation by completing the missing return statement.

Flutter

onGenerateRoute: (settings) {
  switch (settings.name) {
    case '/':
      return MaterialPageRoute(builder: (_) => HomeScreen());
    case '/details':
      return [1](builder: (_) => DetailScreen());
    default:
      return null;
  }
}

Drag options to blanks, or click blank then click option'

ARoute

BCupertinoPageRoute

CMaterialPageRoute

DPageRouteBuilder

Attempts:

3 left

💡 Hint

Common Mistakes

Returning null instead of a valid route.

Using a route type incompatible with Material design.

MaterialPageRoute is the standard route type for material design apps and should be returned here.

4fill in blank

hard

Fill both blanks to define a nested Navigator with initialRoute and onGenerateRoute.

Flutter

Navigator(
  key: [1],
  initialRoute: [2],
  onGenerateRoute: (settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(builder: (_) => HomeScreen());
    }
    return null;
  },
)

Drag options to blanks, or click blank then click option'

AnestedNavigatorKey

B"/home"

C"/"

DmainNavigatorKey

Attempts:

3 left

💡 Hint

Common Mistakes

Using the main navigator's key instead of a nested one.

Setting initialRoute to a non-existent route.

The nested navigator needs a unique key and the initialRoute is usually set to '/'.

5fill in blank

hard

Fill all three blanks to create a nested navigator with a GlobalKey, push a route, and pop it.

Flutter

final [1] = GlobalKey<NavigatorState>();

// Push a new screen
[1].currentState?.[2](MaterialPageRoute(builder: (_) => SettingsScreen()));

// Pop the current screen
[1].currentState?.[3]();

Drag options to blanks, or click blank then click option'

AnestedNavigatorKey

Bpush

Cpop

DnavigatorKey

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the key.

Using pop to push a route or vice versa.

We define a GlobalKey named nestedNavigatorKey, use push to add a route, and pop to remove it.