Named routes in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a named route for the home screen.

Flutter

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => [1](),
  },
)

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

AMyApp

BHomeScreen

CScaffold

DContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using a widget that is not the home screen.

Leaving the route value empty.

The named route '/' should point to the HomeScreen widget to show the home page.

2fill in blank

medium

Complete the code to navigate to the named route '/settings' when a button is pressed.

Flutter

ElevatedButton(
  onPressed: () {
    Navigator.of(context).[1]('/settings');
  },
  child: Text('Go to Settings'),
)

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

ApopAndPushNamed

Bpop

Cpush

DpushNamed

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop which goes back instead of forward.

Using push which requires a Route object, not a string.

To navigate to a named route, use Navigator.of(context).pushNamed with the route name.

3fill in blank

hard

Fix the error in the route definition to correctly map '/profile' to ProfileScreen widget.

Flutter

routes: {
  '/profile': ([1]) => ProfileScreen(),
}

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

ABuildContext

Bctx

Ccontext

Dcontext, state

Attempts:

3 left

💡 Hint

Common Mistakes

Using multiple parameters in the route builder function.

Using a type name instead of a parameter name.

The route builder function takes a single parameter named context by convention.

4fill in blank

hard

Fill both blanks to define a named route '/details' that passes an argument to DetailsScreen.

Flutter

routes: {
  '/details': ([1]) => DetailsScreen(data: ModalRoute.of([2]!)!.settings.arguments),
}

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

Acontext

Bctx

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for context and accessing arguments.

Trying to access arguments without context.

The context parameter is used to access the route settings and its arguments.

5fill in blank

hard

Fill all three blanks to navigate to '/edit' route and pass an argument 'itemId'.

Flutter

Navigator.of(context).[1](
  [2]: '/edit',
  [3]: 'itemId',
);

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

ApushNamed

BrouteName

Carguments

Dpop

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop instead of pushNamed.

Passing arguments with wrong parameter names.

pushNamed navigates to a named route; routeName is the route string; arguments passes data.