BuildContext in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the current theme using BuildContext.

Flutter

ThemeData theme = Theme.of([1]);

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

Acontext

Bwidget

Cstate

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Using widget or state instead of context.

Passing this which is not a BuildContext.

The BuildContext is used to access inherited widgets like Theme. Here, context is the correct argument.

2fill in blank

medium

Complete the code to navigate to a new screen using BuildContext.

Flutter

Navigator.of([1]).push(MaterialPageRoute(builder: (context) => NewScreen()));

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

Awidget

Bcontext

Cstate

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Using widget or state instead of context.

Passing this which is not a BuildContext.

Navigation requires the BuildContext to find the Navigator in the widget tree. context is the correct argument.

3fill in blank

hard

Fix the error in accessing the ScaffoldMessenger using BuildContext.

Flutter

ScaffoldMessenger.of([1]).showSnackBar(SnackBar(content: Text('Hello')));

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

Awidget

Bstate

Ccontext

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Using widget or state instead of context.

Passing this which is not a BuildContext.

The BuildContext is needed to find the ScaffoldMessenger. Use context here.

4fill in blank

hard

Fill both blanks to create a widget tree with a Builder to get a new BuildContext.

Flutter

return Scaffold(
  body: Builder(
    builder: ([1]) {
      return Text('Context is [2]');
    },
  ),
);

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

Acontext

Bwidget

Cstate

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Using widget or state as the builder parameter.

Using different names for the parameter and inside the function.

The builder function provides a new BuildContext named context. Use context for both blanks.

5fill in blank

hard

Fill all three blanks to access MediaQuery data inside a widget build method.

Flutter

Widget build(BuildContext [1]) {
  final size = MediaQuery.of([2]).size;
  return Container(
    width: size.[3],
    height: size.height,
  );
}

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

Acontext

Cwidth

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names than context for the BuildContext parameter.

Accessing size.height instead of size.width for width.

The build method receives a BuildContext named context. Use it to get MediaQuery data. Then access the width property of the size.