GoRouter package in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GoRouter with a single route to HomeScreen.

Flutter

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

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

AMyApp

BMaterialApp

CScaffold

DHomeScreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using MaterialApp instead of the screen widget.

Forgetting to call the widget constructor with ().

The builder returns the widget for the route. Here, it should return HomeScreen().

2fill in blank

medium

Complete the code to navigate to '/profile' using GoRouter.

Flutter

ElevatedButton(
  onPressed: () {
    context.go([1]);
  },
  child: Text('Go to Profile'),
);

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

A'/home'

B'profile'

C'/profile'

D'home'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash in the path string.

Using the wrong path string.

The context.go() method needs the full path string starting with '/'.

3fill in blank

hard

Fix the error in the GoRoute path to accept a userId parameter.

Flutter

GoRoute(
  path: '/user/[1]',
  builder: (context, state) {
    final userId = state.params['userId']!;
    return UserScreen(userId: userId);
  },
),

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

A{userId}

B:userId

C:id

D<userId>

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces instead of colon for parameters.

Using a different parameter name than in state.params.

GoRouter uses colon ':' before the parameter name in the path, like ':userId'.

4fill in blank

hard

Fill both blanks to create a nested route for settings inside profile.

Flutter

GoRoute(
  path: '/profile',
  builder: (context, state) => ProfileScreen(),
  routes: [
    GoRoute(
      path: [1],
      builder: (context, state) => [2](),
    ),
  ],
),

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

A'settings'

BSettingsScreen

C'/settings'

DProfileSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using an absolute path with leading slash for nested routes.

Using wrong widget name in builder.

Nested routes use relative paths without a leading slash. The builder returns the nested screen widget.

5fill in blank

hard

Fill all three blanks to create a GoRouter with initial location and error page.

Flutter

final router = GoRouter(
  initialLocation: [1],
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
  ],
  errorBuilder: (context, state) => [2](),
  debugLogDiagnostics: [3],
);

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

A'/'

BErrorScreen

Ctrue

D'/home'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a path with leading slash in nested routes.

Not enabling debug logs when needed.

initialLocation sets the start path, errorBuilder shows a widget on errors, and debugLogDiagnostics enables debug logs.