Drawer navigation in Flutter - Mini App: Build & Ship

Build: Home Screen with Drawer

A simple app screen with a navigation drawer that slides from the left. The drawer contains three menu items: Home, Profile, and Settings. Tapping each item closes the drawer and shows a message on the main screen.

Target UI

┌─────────────────────────────┐
│☰ Home Screen               │
│                             │
│  Welcome to the Home Screen │
│                             │
│                             │
│                             │
│                             │
│                             │
└─────────────────────────────┘

Drawer (hidden by default):
┌───────────────┐
│ Home          │
│ Profile       │
│ Settings      │
└───────────────┘

Add an AppBar with a menu icon to open the drawer

Implement a Drawer with three ListTile items: Home, Profile, Settings

When a drawer item is tapped, close the drawer and update the main screen text to show which item was selected

Use Scaffold and Drawer widgets properly

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _selectedItem = 'Home Screen';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
        // TODO: Add menu icon to open drawer
      ),
      drawer: Drawer(
        // TODO: Add drawer items here
      ),
      body: Center(
        child: Text(_selectedItem, style: const TextStyle(fontSize: 24)),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _selectedItem = 'Home Screen';

  void _selectItem(String item) {
    setState(() {
      _selectedItem = item;
    });
    Navigator.of(context).pop(); // Close the drawer
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
          tooltip: 'Open navigation menu',
        ),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('Menu', style: TextStyle(color: Colors.white, fontSize: 24)),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('Home'),
              onTap: () => _selectItem('Home Screen'),
            ),
            ListTile(
              leading: const Icon(Icons.person),
              title: const Text('Profile'),
              onTap: () => _selectItem('Profile Screen'),
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Settings'),
              onTap: () => _selectItem('Settings Screen'),
            ),
          ],
        ),
      ),
      body: Center(
        child: Text(_selectedItem, style: const TextStyle(fontSize: 24)),
      ),
    );
  }
}

We added a leading menu icon button in the AppBar that opens the drawer when tapped. The drawer contains a header and three ListTile items: Home, Profile, and Settings. Each ListTile has an icon and label. When tapped, the drawer closes and the main screen text updates to show which menu item was selected. We used Navigator.of(context).pop() to close the drawer. This creates a simple and clear drawer navigation experience.

Final Result

Completed Screen

┌─────────────────────────────┐
│☰ Home Screen               │
│                             │
│  Home Screen                │
│                             │
│                             │
│                             │
│                             │
│                             │
└─────────────────────────────┘

Drawer (when opened):
┌───────────────┐
│ Menu          │
│───────────────│
│ 🏠 Home       │
│ 👤 Profile    │
│ ⚙️ Settings   │
└───────────────┘

Tap the menu icon to open the drawer from the left

Tap 'Home', 'Profile', or 'Settings' to close the drawer and update the main text

The main screen text changes to 'Home Screen', 'Profile Screen', or 'Settings Screen' accordingly

Stretch Goal

Add a dark mode toggle switch inside the drawer that changes the app theme between light and dark.

💡 Hint

Use a StatefulWidget to hold the theme mode state and wrap MaterialApp with a ThemeMode property. Add a SwitchListTile in the drawer to toggle the mode.