Named routes in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ navigation

intermediate

What screen does this named route navigate to?

Given this Flutter code snippet, which screen will be shown when navigating to '/profile'?

Flutter

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/profile': (context) => ProfileScreen(),
    '/settings': (context) => SettingsScreen(),
  },
);

Navigator.pushNamed(context, '/profile');

A ProfileScreen

B HomeScreen

C SettingsScreen

D Error screen because '/profile' is not defined

💡 Hint

Check the routes map for the key '/profile'.

The routes map defines '/profile' to show ProfileScreen. So Navigator.pushNamed with '/profile' shows ProfileScreen.

❓ ui_behavior

intermediate

What happens if you navigate to an undefined named route?

Consider this Flutter app with routes defined only for '/' and '/home'. What happens if you call Navigator.pushNamed(context, '/about')?

Flutter

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => SplashScreen(),
    '/home': (context) => HomeScreen(),
  },
);

Navigator.pushNamed(context, '/about');

A App navigates to SplashScreen

B App navigates to HomeScreen

C App silently ignores the navigation request

D App throws a runtime error: Could not find a generator for route "/about"

💡 Hint

Check what happens when a route is missing in the routes map.

If a named route is not found in the routes map and no onGenerateRoute is provided, Flutter throws a runtime error.

❓ lifecycle

advanced

Which lifecycle method is called when navigating to a new named route?

When you navigate from ScreenA to ScreenB using Navigator.pushNamed, which lifecycle method of ScreenB's stateful widget is called first?

A dispose()

B build()

C initState()

D didChangeDependencies()

💡 Hint

Think about widget creation lifecycle before build.

initState() is called once when the state object is inserted into the widget tree, before build().

📝 Syntax

advanced

Identify the correct syntax for defining named routes in MaterialApp

Which option correctly defines named routes in a Flutter MaterialApp widget?

Flutter

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

A routes: ['/': HomeScreen(), '/details': DetailsScreen()]

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

C routes: ['/': (context) => HomeScreen(), '/details': (context) => DetailsScreen()]

D routes: {'/': HomeScreen, '/details': DetailsScreen}

💡 Hint

routes expects a Map.

The routes property requires a map with string keys and functions returning widgets. Option B matches this.

🔧 Debug

expert

Why does this named route navigation fail at runtime?

Given this code, why does Navigator.pushNamed(context, '/profile') cause a runtime error?

Flutter

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/profile': ProfileScreen(),
  },
);

Navigator.pushNamed(context, '/profile');

A Because '/profile' value should be a function returning a widget, not a widget instance

B Because '/profile' is missing from routes map

C Because initialRoute is set to '/' instead of '/profile'

D Because Navigator.pushNamed requires a BuildContext from MaterialApp

💡 Hint

Check the type of values in the routes map.

The routes map values must be functions returning widgets, not widget instances. Here '/profile' maps to a widget instance, causing a runtime error.