GoRouter package in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ navigation

intermediate

Understanding Basic Route Definition in GoRouter

Given the following GoRouter configuration, what is the initial screen shown when the app starts?

Flutter

final router = GoRouter(
  initialLocation: '/home',
  routes: [
    GoRoute(
      path: '/home',
      builder: (context, state) => const HomeScreen(),
    ),
    GoRoute(
      path: '/settings',
      builder: (context, state) => const SettingsScreen(),
    ),
  ],
);

A App shows a blank screen

B SettingsScreen widget is displayed

C App crashes with a routing error

D HomeScreen widget is displayed

💡 Hint

Look at the initialLocation property in the GoRouter setup.

The initialLocation is set to '/home', so the GoRouter shows the HomeScreen widget first.

❓ ui_behavior

intermediate

Passing Parameters with GoRouter

What will be the output on the DetailsScreen when navigating to '/details/42' with this GoRouter setup?

Flutter

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/details/:id',
      builder: (context, state) {
        final id = state.params['id'];
        return DetailsScreen(id: id!);
      },
    ),
  ],
);

// DetailsScreen widget shows text: 'Item ID: <id>'

A DetailsScreen shows 'Item ID: 42'

B DetailsScreen shows 'Item ID: null'

C App throws a runtime error due to missing id

D DetailsScreen shows 'Item ID: /details/42'

💡 Hint

Check how the parameter is extracted from state.params.

The ':id' in the path captures '42' as a parameter, passed to DetailsScreen and displayed.

❓ lifecycle

advanced

GoRouter Refresh Listenable Behavior

If you want the GoRouter to rebuild routes when a user logs in or out, which of these is the correct way to trigger route refresh?

Flutter

class AuthNotifier extends ChangeNotifier {
  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;
  void login() {
    _loggedIn = true;
    notifyListeners();
  }
  void logout() {
    _loggedIn = false;
    notifyListeners();
  }
}

final authNotifier = AuthNotifier();

final router = GoRouter(
  refreshListenable: authNotifier,
  routes: [
    GoRoute(
      path: '/profile',
      builder: (context, state) => ProfileScreen(),
    ),
  ],
);

A Recreate GoRouter instance manually after login/logout

B Call notifyListeners() on AuthNotifier to refresh routes

C Use setState() in main widget to refresh GoRouter

D No need to refresh; GoRouter updates automatically

💡 Hint

refreshListenable listens for notifyListeners calls.

Calling notifyListeners() on the refreshListenable triggers GoRouter to rebuild routes.

📝 Syntax

advanced

Correct Syntax for Nested Routes in GoRouter

Which option correctly defines nested routes for '/dashboard' and '/dashboard/settings' using GoRouter?

A GoRoute(path: '/dashboard', builder: (c,s) => Dashboard(), children: [GoRoute(path: 'settings', builder: (c,s) => Settings())])

B GoRoute(path: '/dashboard', builder: (c,s) => Dashboard()), GoRoute(path: '/dashboard/settings', builder: (c,s) => Settings())

C GoRoute(path: '/dashboard', builder: (c,s) => Dashboard(), routes: [GoRoute(path: 'settings', builder: (c,s) => Settings())])

D GoRoute(path: '/dashboard', builder: (c,s) => Dashboard(), routes: [GoRoute(path: '/settings', builder: (c,s) => Settings())])

💡 Hint

Nested routes use relative paths without leading slash in 'routes' list.

Nested routes inside 'routes' use relative paths like 'settings' without leading slash.

🔧 Debug

expert

Identifying the Cause of a GoRouter Navigation Error

You get this error when navigating: 'Could not find a matching route for the path /profile'. Given this GoRouter setup, what is the cause?

Flutter

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/home',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/settings',
      builder: (context, state) => SettingsScreen(),
    ),
  ],
);

A There is no route defined for '/profile' in the routes list

B The '/profile' route is defined but missing a builder function

C The initialLocation is set incorrectly to '/profile'

D The GoRouter instance is not assigned to MaterialApp.router

💡 Hint

Check if '/profile' is listed in the routes.

The error occurs because '/profile' route is not defined in the GoRouter routes list.

Practice

1. What is the main purpose of the GoRouter package in Flutter?

easy

A. To handle database connections

B. To manage state across widgets

C. To style widgets with custom themes

D. To simplify and manage screen navigation in Flutter apps

Solution

1. Step 1: Understand GoRouter's role

   GoRouter is designed to make navigation between screens easier and clearer in Flutter apps.

2. Step 2: Compare with other options

   Options A, C, and D relate to database, styling, and state management, which are not GoRouter's purpose.

3. Final Answer:

   To simplify and manage screen navigation in Flutter apps -> Option D

4. Quick Check:

   GoRouter = Navigation helper [OK]

Hint: Remember GoRouter is about moving between screens [OK]

Common Mistakes:

• Confusing navigation with state management
• Thinking GoRouter styles widgets
• Assuming GoRouter handles databases

2. Which of the following is the correct way to navigate to a new route named '/profile' using GoRouter?

easy

A. context.navigateTo('/profile');

B. Navigator.push('/profile');

C. context.go('/profile');

D. goRouter.push('/profile');

Solution

1. Step 1: Recall GoRouter navigation syntax

   GoRouter uses context.go(path) to navigate to a route.

2. Step 2: Check each option

   context.go('/profile'); uses context.go('/profile'), which is correct. Options B, C, and D use incorrect methods or objects.

3. Final Answer:

   context.go('/profile'); -> Option C

4. Quick Check:

   Use context.go() for navigation [OK]

Hint: Use context.go() with the route path to navigate [OK]

Common Mistakes:

• Using Navigator.push instead of context.go
• Calling non-existent methods like context.navigateTo
• Trying to call goRouter.push without context

3. Given this GoRouter setup:

final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => HomeScreen()),
    GoRoute(path: '/settings', builder: (context, state) => SettingsScreen()),
  ],
);

// In HomeScreen's button onPressed:
context.go('/settings');

What screen will be displayed after pressing the button?

medium

A. HomeScreen

B. SettingsScreen

C. An error screen

D. A blank screen

Solution

1. Step 1: Analyze the routes defined

   There are two routes: '/' for HomeScreen and '/settings' for SettingsScreen.

2. Step 2: Understand the navigation call

   The button calls context.go('/settings'), which navigates to the '/settings' route.

3. Final Answer:

   SettingsScreen -> Option B

4. Quick Check:

   context.go('/settings') shows SettingsScreen [OK]

Hint: context.go(path) shows the screen for that path [OK]

Common Mistakes:

• Assuming context.go('/') stays on HomeScreen
• Thinking navigation causes error without extra setup
• Confusing builder with route path

4. What is wrong with this GoRouter route definition?

GoRoute(
  path: '/profile',
  builder: (context) => ProfileScreen(),
)

medium

A. The builder function is missing the second parameter 'state'

B. The path should start with a capital letter

C. ProfileScreen() must be wrapped in a MaterialApp

D. GoRoute requires a name property

Solution

1. Step 1: Check GoRoute builder signature

   The builder function must accept two parameters: context and state.

2. Step 2: Identify the error

   The code only has one parameter (context), missing the required 'state' parameter.

3. Final Answer:

   The builder function is missing the second parameter 'state' -> Option A

4. Quick Check:

   builder(context, state) needs two parameters [OK]

Hint: Builder always needs (context, state) parameters [OK]

Common Mistakes:

• Omitting the 'state' parameter in builder
• Thinking path must be capitalized
• Assuming name property is mandatory
• Wrapping screen in MaterialApp inside builder

5. You want to pass a user ID as a parameter in the route path using GoRouter. Which route definition and navigation call are correct?

// Route definition options:
A) GoRoute(path: '/user/:id', builder: (context, state) => UserScreen(id: state.params['id']!))
B) GoRoute(path: '/user', builder: (context, state) => UserScreen(id: state.params['id']!))

// Navigation call options:
1) context.go('/user/123');
2) context.go('/user?id=123');

hard

A. Use route A with navigation call 1

B. Use route A with navigation call 2

C. Use route B with navigation call 1

D. Use route B with navigation call 2

Solution

1. Step 1: Understand route parameter syntax

   Route path with ':id' means the ID is part of the path, so '/user/:id' is correct for path parameters.

2. Step 2: Match navigation call to route

   To pass the ID in the path, navigation must be like '/user/123', so call 1 matches route A.

3. Final Answer:

   Use route A with navigation call 1 -> Option A

4. Quick Check:

   Path param ':id' needs '/user/123' navigation [OK]

Hint: Use ':param' in path and '/value' in go() call [OK]

Common Mistakes:

• Using query parameters with path param syntax
• Missing ':id' in route path
• Passing ID as query string when route expects path param