Drawer navigation in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a drawer to the Scaffold widget.

Flutter

Scaffold(
  appBar: AppBar(title: Text('Home')),
  drawer: [1],
  body: Center(child: Text('Welcome')),
)

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

ADrawer()

BContainer()

CAppBar()

DListView()

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container or AppBar instead of Drawer.

Forgetting to add the drawer property.

The drawer property of Scaffold expects a Drawer widget to show the side menu.

2fill in blank

medium

Complete the code to add a list of items inside the drawer.

Flutter

Drawer(
  child: [1](
    children: [
      ListTile(title: Text('Item 1')),
      ListTile(title: Text('Item 2')),
    ],
  ),
)

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

ARow

BContainer

CColumn

DListView

Attempts:

3 left

💡 Hint

Common Mistakes

Using Column which does not scroll by default.

Using Row which arranges items horizontally.

Use ListView inside the drawer to allow scrolling if items overflow.

3fill in blank

hard

Fix the error in the code to close the drawer when an item is tapped.

Flutter

ListTile(
  title: Text('Close Drawer'),
  onTap: () {
    Navigator.of(context).[1]();
  },
)

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

Apop

Bpush

CpushReplacement

DpopUntil

Attempts:

3 left

💡 Hint

Common Mistakes

Using push which adds a new route instead of closing.

Using popUntil without a proper predicate.

Use Navigator.of(context).pop() to close the drawer by popping it from the navigation stack.

4fill in blank

hard

Fill both blanks to create a drawer header with a title and background color.

Flutter

Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        decoration: BoxDecoration(color: [1]),
        child: Text([2], style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    ],
  ),
)

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

AColors.blue

B'My App'

CColors.red

D'Header'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a color for decoration.

Using a color instead of a string for the text.

The decoration uses Colors.blue for background color, and the header text is 'My App'.

5fill in blank

hard

Fill all three blanks to navigate to a new page and close the drawer on tap.

Flutter

ListTile(
  title: Text('Go to Settings'),
  onTap: () {
    Navigator.of(context).[1](MaterialPageRoute(builder: (context) => [2]()));
    Navigator.of(context).[3]();
  },
)

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

Apush

BSettingsPage

Cpop

DpushReplacement

Attempts:

3 left

💡 Hint

Common Mistakes

Using pushReplacement which replaces the current page.

Not closing the drawer after navigation.

Use push to open the new page SettingsPage(), then pop() to close the drawer.