Flutter: agregar un Drawer

En las aplicaciones que emplean Material Design, hay dos opciones principales de navegación: tabs y drawers. Cuando no hay suficiente espacio para sostener las pestañas, los drawers son una alternativa práctica.

En Flutter, podemos usar el widget de Drawer en combinación con un Scaffold para crear un layout con un Material Design Drawer.

Crear un Scaffold

Para agregar un Drawer a nuestra aplicación, necesitaremos envolverlo en un widget de Scaffold.

Scaffold(
  drawer: // Acá va nuestro drawer.
);

Añadir un Drawer

Ahora podemos añadir un drawer a nuestro Scaffold. Un drawer puede ser cualquier widget, pero a menudo es mejor utilizar el widget Drawer de la material library, que se adhiere a las especificaciones de Material Design.

Scaffold(
  drawer: Drawer(
    child: // Acá van los items.
  )
);

Llene el drawer con items

Ahora que tenemos un drawer en su lugar, ¡podemos añadirle contenido! En este ejemplo, usaremos un ListView. Aunque podríamos usar un widget Column, ListView es útil en esta situación porque permitirá a los usuarios desplazarse por el cajón si el contenido ocupa más espacio del que soporta la pantalla. Rellenaremos el ListView con un DrawerHeader y dos widgets ListTile.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero, // Importante remover el padding
    children: <Widget>[
      DrawerHeader(
        child: Text('Drawer Header'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Update the state of the app
          // ...
        },
      ),
      ListTile(
        title: Text('Item 2'),
        onTap: () {
          // Update the state of the app
          // ...
        },
      ),
    ],
  ),
);

Cerrar el cajón mediante programación

Después de que un usuario toca un elemento, a menudo queremos cerrar el cajón. ¿Cómo podemos conseguirlo? Usando el Navigator.

Cuando un usuario abre el cajón, Flutter lo agregará automáticamente al stack de navegación. Por lo tanto, para cerrar el cajón, podemos llamar a Navigator.pop(context).

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