Drawer navigation in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you tap a Drawer item?

In a Flutter app with a Drawer containing navigation items, what is the typical behavior when a user taps an item inside the Drawer?

A The Drawer stays open and the app does not change screens.

B The Drawer closes and the app navigates to the selected screen.

C The app crashes because Drawer items cannot be tapped.

D The Drawer closes but the app remains on the current screen.

💡 Hint

Think about how navigation usually works with side menus in mobile apps.

When a user taps a Drawer item, the Drawer typically closes and the app navigates to the selected screen to provide a smooth user experience.

❓ lifecycle

intermediate

When is the Drawer widget built in Flutter?

At what point in the widget lifecycle is the Drawer widget built in a Flutter Scaffold?

A Only when the user opens the Drawer for the first time.

B Only once when the app starts and never rebuilt.

C Every time the Scaffold is built, regardless of Drawer state.

D When the user taps the Drawer icon and the Drawer is about to open.

💡 Hint

Consider how Flutter builds widgets in the widget tree.

The Drawer widget is part of the Scaffold's widget tree and is built every time the Scaffold rebuilds, even if the Drawer is not visible.

❓ navigation

advanced

What is the correct way to close the Drawer programmatically?

In Flutter, if you want to close the Drawer from inside a Drawer item tap handler, which code snippet correctly closes the Drawer?

Flutter

Scaffold.of(context).???;

A Scaffold.of(context).closeDrawer();

B Navigator.of(context).pushReplacementNamed('/home');

C Scaffold.of(context).openEndDrawer();

D Navigator.of(context).pop();

💡 Hint

Think about how to close routes or overlays in Flutter.

The Drawer is a route on top of the main screen. Calling Navigator.of(context).pop() closes the Drawer by popping that route.

📝 Syntax

advanced

Identify the error in this Drawer code snippet

What error will this Flutter Drawer code cause? Drawer( child: ListView( children: [ ListTile( title: Text('Home'), onTap: () { Navigator.pushNamed(context, '/home'); } ), ], ), );

A Error because Navigator.pushNamed is called without closing the Drawer first.

B Error because Drawer must have a header widget.

C No error; code works correctly.

D Error because ListView inside Drawer must have a padding property.

💡 Hint

Think about what happens if you navigate without closing the Drawer.

If you navigate without closing the Drawer, the Drawer remains open on top of the new screen, causing UI issues.

🧠 Conceptual

expert

Why use a GlobalKey with Drawer?

In Flutter, why might you use a GlobalKey to control the Drawer instead of calling Scaffold.of(context)?

A Because GlobalKey allows opening the Drawer from widgets that do not have a direct Scaffold ancestor in the widget tree.

B Because Scaffold.of(context) only works inside the Drawer widget.

C Because GlobalKey automatically closes the Drawer when navigating.

D Because Scaffold.of(context) is deprecated and should not be used.

💡 Hint

Think about widget context and accessing ScaffoldState from different parts of the app.

GlobalKey lets you access the ScaffoldState from anywhere, even if the widget context is not a descendant of Scaffold, enabling Drawer control.