Añadir un drawer a una pantalla

En las aplicaciones que utilizan Material Design, existen dos opciones principales de navegación: pestañas y paneles laterales (drawers). Cuando no hay espacio suficiente para las pestañas, los paneles laterales ofrecen una práctica alternativa.

En Flutter, utiliza el Widget Drawer en combinación con un Scaffold para crear un diseño con un panel lateral de Material Design. Esta receta utiliza los siguientes pasos:

1. Crear un Scaffold.
2. Añadir un panel lateral (drawer).
3. Llenar el panel lateral (drawer) con elementos.
4. Cerrar el panel lateral (drawer) programáticamente.

Para añadir un panel lateral a la aplicación, envuélvela en un Widget Scaffold. El Widget Scaffold proporciona una estructura visual consistente a las aplicaciones que siguen las directrices de Material Design. También soporta componentes especiales de Material Design, como Drawers, AppBars y SnackBars.

En este ejemplo, crea un Scaffold con un drawer:

Scaffold(
  appBar: AppBar(title: const Text('AppBar without hamburger button')),
  drawer: // Add a Drawer here in the next step.
);

Ahora añade un panel lateral (drawer) al Scaffold. Un panel lateral puede ser cualquier Widget, pero a menudo es mejor utilizar el Widget Drawer de la librería material, que se adhiere a la especificación de Material Design.

Scaffold(
  appBar: AppBar(title: const Text('AppBar with hamburger button')),
  drawer: Drawer(
    child: // Populate the Drawer in the next step.
  ),
);

Ahora que tienes un Drawer colocado, añádele contenido. Para este ejemplo, utiliza un ListView. Aunque podrías utilizar un Widget Column, ListView es práctico porque permite a los usuarios desplazarse por el panel lateral si el contenido ocupa más espacio del que la pantalla admite.

Llena el ListView con un Widget DrawerHeader y dos Widgets ListTile. Para obtener más información sobre el trabajo con listas, consulta las recetas de listas.

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(color: Colors.blue),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

Normalmente, no necesitas escribir código para abrir un panel lateral (drawer), porque cuando el Widget leading es null, la implementación por defecto en AppBar es DrawerButton.

Pero si quieres tener un control libre del panel lateral (drawer), puedes hacerlo utilizando Builder para llamar a Scaffold.of(context).openDrawer().

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
    leading: Builder(
      builder: (context) {
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      },
    ),
  ),
  drawer: Drawer(
    child: // Populate the Drawer in the last step.
  ),
);

Después de que un usuario toque un elemento, es posible que desees cerrar el panel lateral. Puedes hacerlo utilizando el Navigator.

Cuando un usuario abre el panel lateral, Flutter lo añade a la pila de navegación. Por lo tanto, para cerrar el panel lateral, llama a Navigator.pop(context).

ListTile(
  title: const Text('Item 1'),
  onTap: () {
    // Update the state of the app
    // ...
    // Then close the drawer
    Navigator.pop(context);
  },
),

Este ejemplo muestra un Widget Drawer tal como se utiliza dentro de un Widget Scaffold. El Drawer tiene tres elementos ListTile. La función _onItemTapped cambia el índice del elemento seleccionado y muestra el texto correspondiente en el centro del Scaffold.