Un cajón lateral

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 25 de 33.

Un Drawer es un panel que se desliza desde un lado y sirve para las secciones de una aplicación que no caben en las pestañas. Asígnalo a 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);
          },
        ),
      ],
    ),
  ),
)

Con un cajón, la barra de la aplicación muestra al principio un botón de menú con tres líneas. Al tocarlo o deslizar el dedo desde el borde, se abre el cajón.

El cajón permanece abierto hasta que algo lo cierra. Un cajón abierto es como una pantalla superpuesta a la página, así que Navigator.pop(context) lo cierra. Llámalo después de tocar una fila; de lo contrario, el cajón cubrirá la página que elegiste.

Un DrawerHeader es el área grande de la parte superior, donde va el nombre de la aplicación o la cuenta con sesión iniciada.

Desafío

Fácil

Abre el panel lateral con el botón de menú: solo tiene la bandeja de entrada. Añade dos filas más como la fila de la bandeja de entrada, cada una estableciendo folder y cerrando el panel lateral:

Sent, con Icons.send
Trash, con Icons.delete

Pruébalo tú mismo

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);
              },
            ),
          ],
        ),
      ),
    );
  }
}