Hola, en el artículo de hoy vamos a ver cómo crear un menú lateral (Drawer) en Flutter. Antes de empezar, te aconsejo que te familiarices con el lenguaje Dart, ya que no nos vamos a parar a explicarlo. Para aprender Dart tienes muchos recursos en internet como la documentación oficial https://dart.dev/ y una página web, donde poder practicar sin necesidad de instalar nada https://dartpad.dartlang.org/.
Ahora si vamos a empezar con lo prometido, ¿cómo creamos un menú lateral en Flutter como el que os muestro a continuación?
Para ello tenemos el Widget Drawer, el cual nos facilita la vida enormemente. Show me the code!!
import 'package:flutter/material.dart';
class MenuLateralPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Menu")),
body: Center(child: Text('My Page!')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
padding: EdgeInsets.only(top: 40),
child: DrawerHeader(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.scaleDown,
image: AssetImage("assets/aepi.jpg")
)
), child: null,
),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Item 1'),
onTap: () {
Navigator.popAndPushNamed(context, 'dialogos');
},
),
ListTile(
leading: Icon(Icons.settings_backup_restore),
title: Text('Item 2'),
onTap: () {
Navigator.popAndPushNamed(context, 'dialogos');
},
),
],
),
),
);
}
}
Muy bien, ¿pero me lo puedes explicar?
Tenemos una clase llamada MenuLateralPage de tipo StatelessWidget, es decir, una clase que no necesita redibujar la interfaz de usuario en pantalla tras ejecutar alguna acción. Esta clase retorna un Scaffold, es decir, un andamiaje que nos va a permitir construir una aplicación móvil con los elementos mas habituales como una AppBar, un body un FloatingActionButton o un Drawer.
Como se puede en el código el Scaffold me permite tener una propiedad llamada drawer, a la cual le paso el Widget Drawer que nos provee Flutter:
return Scaffold(
appBar: AppBar(title: Text("Menu")),
body: Center(child: Text('My Page!')),
drawer: Drawer()
Este Drawer recibe una lista (ListView) la cual mostrará las diferentes opciones de mi menú lateral. Estas opciones las voy a poder construir gracias al Widget ListTile, estos Widgets ListTile quedan dentro de la propiedad children de mi ListView.
En concreto los dos ListTile que tenemos tienen un icono a la izquierda y un texto a la derecha y cuando pulsamos sobre alguno de ellos lo que hacemos es navegar a otra página gracias a:
Navigator.popAndPushNamed(context, 'dialogos');
Como podéis ver, es muy sencillo crear un menú lateral en nuestras aplicaciones, gracias al widget Drawer de Flutter. Espero que os haya gustado esta entrada y recuerda compartir!
Un saludo