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.

Practice

1. What is the main purpose of using named routes in a Flutter app?

easy

A. To handle user input events

B. To style the app's theme

C. To manage app state globally

D. To give each screen a simple name for easy navigation

Solution

1. Step 1: Understand named routes concept

   Named routes assign simple string names to screens for easier navigation instead of using widget instances directly.

2. Step 2: Identify the main purpose

   This helps developers navigate between screens by referring to route names, making code cleaner and navigation simpler.

3. Final Answer:

   To give each screen a simple name for easy navigation -> Option D

4. Quick Check:

   Named routes = simple screen names for navigation [OK]

Hint: Named routes are simple screen names for navigation [OK]

Common Mistakes:

• Confusing named routes with app theming
• Thinking named routes manage app state
• Mixing named routes with event handling

2. Which of the following is the correct way to define named routes in a Flutter MaterialApp?

easy

A. MaterialApp(routeNames: {'/home': HomeScreen()})

B. MaterialApp(routes: {'/home': (context) => HomeScreen()})

C. MaterialApp(navigation: {'/home': HomeScreen()})

D. MaterialApp(namedRoutes: {'/home': () => HomeScreen()})

Solution

1. Step 1: Recall MaterialApp named routes syntax

   Named routes are defined using the 'routes' property with a map of route names to builder functions.

2. Step 2: Check each option

   MaterialApp(routes: {'/home': (context) => HomeScreen()}) correctly uses 'routes' with a map where the value is a function returning the widget. Other options use incorrect property names or values.

3. Final Answer:

   MaterialApp(routes: {'/home': (context) => HomeScreen()}) -> Option B

4. Quick Check:

   Use 'routes' with map of name to builder function [OK]

Hint: Use 'routes' property with map of names to builder functions [OK]

Common Mistakes:

• Using wrong property names like routeNames or navigation
• Assigning widget instance instead of builder function
• Missing context parameter in builder function

3. Given the following code snippet, what screen will be shown when Navigator.pushNamed(context, '/profile') is called?

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

medium

A. ProfileScreen

B. Error: Route not found

C. SettingsScreen

D. HomeScreen

Solution

1. Step 1: Check the routes map for '/profile'

   The routes map defines '/profile' as a key with ProfileScreen() as its widget builder.

2. Step 2: Understand Navigator.pushNamed behavior

   Calling Navigator.pushNamed with '/profile' will navigate to the ProfileScreen widget.

3. Final Answer:

   ProfileScreen -> Option A

4. Quick Check:

   Navigator.pushNamed('/profile') shows ProfileScreen [OK]

Hint: Match route name to widget in routes map [OK]

Common Mistakes:

• Confusing route names or mistyping them
• Assuming default screen shows instead of named route
• Expecting error when route exists

4. What is wrong with this code snippet for navigating to a named route?

Navigator.pushNamed('/settings');

medium

A. Navigator.pushNamed does not exist

B. Route name is incorrect

C. Missing BuildContext parameter

D. Should use Navigator.pop instead

Solution

1. Step 1: Check Navigator.pushNamed method signature

   Navigator.pushNamed requires a BuildContext as the first argument, then the route name as a string.

2. Step 2: Identify the error in the code

   The code calls Navigator.pushNamed with only the route name string, missing the required context parameter.

3. Final Answer:

   Missing BuildContext parameter -> Option C

4. Quick Check:

   Navigator.pushNamed needs context first [OK]

Hint: Navigator.pushNamed requires context and route name [OK]

Common Mistakes:

• Omitting the BuildContext argument
• Passing route name as first argument without context
• Confusing pushNamed with pop

5. You want to navigate from HomeScreen to DetailsScreen using named routes and pass an ID parameter. Which approach correctly passes the argument using Navigator.pushNamed?

hard

A. Navigator.pushNamed(context, '/details', arguments: 42);

B. Navigator.pushNamed(context, '/details/42');

C. Navigator.pushNamed('/details', arguments: 42);

D. Navigator.pushNamed(context, '/details', params: 42);

Solution

1. Step 1: Recall how to pass arguments with named routes

   Navigator.pushNamed accepts an optional 'arguments' parameter to pass data to the new screen.

2. Step 2: Analyze each option

   Navigator.pushNamed(context, '/details', arguments: 42); correctly passes context, route name, and arguments. Navigator.pushNamed(context, '/details/42'); tries to encode ID in route string (not standard). Navigator.pushNamed('/details', arguments: 42); misses context. Navigator.pushNamed(context, '/details', params: 42); uses wrong parameter name 'params'.

3. Final Answer:

   Navigator.pushNamed(context, '/details', arguments: 42); -> Option A

4. Quick Check:

   Use 'arguments' parameter to pass data [OK]

Hint: Pass data with 'arguments' parameter in pushNamed [OK]

Common Mistakes:

• Omitting context parameter
• Passing data in route string instead of arguments
• Using wrong parameter name like 'params'