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.