En este tutorial vamos a ver como podemos crear un Drawer menú en Flutter. Este tipo de menús o navegación, si bien a día de hoy no está tan de moda como antes, sí que es cierto que cuando tenemos muchas opciones o secciones en nuestra aplicación es bastante cómodo y útil para mostrar estas opciones a nuestros usuarios.

Un Drawer menú es aquel que está oculto por defecto en un lateral de la aplicación y que tras pulsar un botón, hamburguer button, aparece desplazándose por el lateral en el que estaba oculto. Tras pulsar sobre una opción de navegación, este vuelve a ocultarse de forma automática.

Flutter nos provee de una clase Drawer con una serie de métodos y clases auxiliares que nos facilita enormemente la creación de este tipo de desarrollos y lo hace realmente fácil.

Así que sin más dilación vamos al código.

Creando un Drawer menu en Flutter

La clase Scaffold posee una propiedad, drawer, que requiere de un objeto tipo Drawer con el que construir este tipo de menús, así que lo único que debemos de hacer es crear un objeto de este tipo.

En el ejemplo que vamos a realizar vamos a abstraer todo este Drawer menú en una clase para así tener el código un poco más modularizado. Creamos una nueva clase de Flutter que extienda de StatelessWidget y en el método build creasmos nuestro Drawer.

return Drawer(
 child: ListView(
   padding: EdgeInsets.zero,
   children: <Widget>[
     _buildDrawerHeader(),
     _buildDrawerItem(icon: Icons.home, text: 'Home', onTap: () => {
         Navigator.pushReplacementNamed(context, MyApp.home)
     }),
     _buildDrawerItem(icon: Icons.account_circle, text: 'Profile', onTap: () => {
       Navigator.pushReplacementNamed(context, MyApp.profile)
     }),
     _buildDrawerItem(icon: Icons.movie, text: 'Movies', onTap: () => {
       Navigator.pushReplacementNamed(context, MyApp.movies)
     }),
     Divider(),
     _buildDrawerItem(icon: Icons.contact_phone, text: 'Contact Info', onTap: () => {
       Navigator.pushReplacementNamed(context, MyApp.contacts)
     }),
     ListTile(
       title: Text('App version 1.0.0'),
       onTap: () {},
     ),
   ],
 ),
);

En este código podemos observar varias cosas. Primero, el listado de opciones de nuestro menú lo creamos haciendo una simple lista, en este caso utilizando un ListView. Cada uno de los widgets de esta lista es una opción de nuestro menú.

El primero de todos es un tipo de widget especial, es un <a href="https://api.flutter.dev/flutter/material/DrawerHeader-class.html" target="_blank" rel="noreferrer noopener">DrawerHeader</a>, otra de las clases que nos da Flutter para este tipo de desarrollos.

Widget _buildDrawerHeader() {
 return DrawerHeader(
     margin: EdgeInsets.zero,
     padding: EdgeInsets.zero,
     decoration: BoxDecoration(
         image: DecorationImage(
             fit: BoxFit.fill,
             image:  AssetImage('res/images/drawer_header.jpg'))),
     child: Stack(children: <Widget>[
       Positioned(
           bottom: 20.0,
           left: 20.0,
           child: Text("Compilación Movil",
               style: TextStyle(
                   color: Colors.white,
                   fontSize: 18.0,
                   fontWeight: FontWeight.w500))),
     ]));
}

Este widget es el que nos crea la cabecera en el listado de opciones del Drawer y creo que el código es bastante simple y explicativo por si mismo.

El resto de opciones del menú está construido con:

Widget _buildDrawerItem(
   {IconData icon, String text, GestureTapCallback onTap}) {
 return ListTile(
   title: Row(
     children: <Widget>[
       Icon(icon),
       Padding(
         padding: EdgeInsets.only(left: 8.0),
         child: Text(text),
       )
     ],
   ),
   onTap: onTap,
 );
}

Son widgets normales para construir un listado u otro tipo de vistas. Aunque se puede hacer lo que se desee.

Con esta clase que hemos creado, DrawerMenu, solo nos queda instanciarla en la vista que deseemos que tenga un drawer como menú lateral. 

En el ejemplo hemos dispuesto varias opciones de navegación, Home, Profile, Movies, Contacts. Cada una de ellas será una vista nueva a la que navegar cuando pulsemos sobre la opción en el menú, por tanto en cada una de ellas tendremos que tener un Scaffold y en este instanciaremos nuestra clase Drawer para setearla en la propiedad que este posee.

Así por ejemplo, nuestro clase Home será tal que así:

class Home extends StatelessWidget {

 static const String routeName = '/home';

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("Home"),
     ),
     drawer: DrawerMenu(),
     body: Center(
       child: Text(
         'Home Page',
       ),
     ), // This trailing comma makes auto-formatting nicer for build methods.
   );
 }

}

La clase Profile, que crea la vista Profile será:

class Profile extends StatelessWidget {

 static const String routeName = '/profile';

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("Profile"),
     ),
     drawer: DrawerMenu(),
     body: Center(
       child: Text(
         'Profile Page',
       ),
     ), // This trailing comma makes auto-formatting nicer for build methods.
   );
 }

}

Y así el resto de opciones. Como vemos, al tener abstraída la clase Drawer nos facilita su utilización en el resto de vistas y su manejo. Y básicamente esto es todo lo que hay que hacer para crear este tipo de Drawer Menús en Flutter.

El código lo tenéis como siempre en Github