A Side Drawer

Part of the Lists and Screens section of Coddy's Flutter journey. Lesson 25 of 33.

A Drawer is a panel that slides in from the side, for the places an app has that do not fit in tabs. Give it to the Scaffold:

Scaffold(
  appBar: AppBar(title: Text(folder)),
  drawer: Drawer(
    child: ListView(
      children: [
        const DrawerHeader(child: Text('Mail')),
        ListTile(
          title: const Text('Sent'),
          onTap: () {
            setState(() {
              folder = 'Sent';
            });
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
)

With a drawer, the app bar shows a menu button with three lines at its start. Tapping it, or swiping in from the edge, opens the drawer.

The drawer stays open until something closes it. An open drawer is like a screen on top of the page, so Navigator.pop(context) closes it. Call it after a row is tapped, or the drawer covers the page you picked.

A DrawerHeader is the big area at the top, for the app's name or the signed in account.

Challenge

Easy

Open the drawer with the menu button: it has only the Inbox. Add two more rows like the Inbox row, each setting folder and closing the drawer:

Sent, with Icons.send
Trash, with Icons.delete

Try it yourself

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(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

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

class _HomeScreenState extends State<HomeScreen> {
  String folder = 'Inbox';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(folder)),
      body: Center(
        child: Text('No messages in $folder'),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              child: Text('Mail', style: TextStyle(fontSize: 24)),
            ),
            ListTile(
              leading: const Icon(Icons.inbox),
              title: const Text('Inbox'),
              onTap: () {
                setState(() {
                  folder = 'Inbox';
                });
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}