Menú lateral Drawer.

 

Cómo Agregar un Menú Lateral en Flutter

Flutter nos facilita enormemente la creación de menús laterales, comúnmente conocidos como drawers. Estos elementos son ideales para proporcionar una navegación intuitiva y organizada en nuestras aplicaciones.

Entendiendo el Widget Drawer

El widget principal para crear menús laterales en Flutter es Drawer. Este widget se coloca dentro de un Scaffold para integrarlo a la estructura básica de una pantalla.

Pasos Básicos

1. Importar los Widgets Necesarios:

   Dart

   import 'package:flutter/material.dart';
   

2. Crear el Widget Drawer: Dentro del Scaffold, asignamos el widget Drawer a la propiedad drawer. El contenido del Drawer se define entre las etiquetas <Drawer> y </Drawer>.

   Dart

   Scaffold(
     appBar: AppBar(
       title: Text('Mi Aplicación'),
     ),
     drawer: Drawer(
       child: ListView(
         padding: EdgeInsets.zero,
         children: <Widget>[
           DrawerHeader(
             child: Text('Menú Lateral'),
             decoration: BoxDecoration(
               color: Colors.blue,
             ),
           ),
           ListTile(
             title: Text('Inicio'),
             onTap: () {
               // Navegar a la pantalla de inicio
             },
           ),
           ListTile(
             title: Text('Configuración'),
             onTap: () {
               // Navegar a la pantalla de configuración
             },
           ),
         ],
       ),
     ),
   ),
   

Personalizando el Menú Lateral

• DrawerHeader: Define la cabecera del menú, donde puedes colocar un logo, título o cualquier otro elemento visual.
• ListTile: Cada elemento del menú se crea con un ListTile, que incluye un título y opcionalmente un icono y un subtítulo.
• onTap: Al hacer clic en un ListTile, se ejecuta la función asociada a la propiedad onTap, donde puedes implementar la lógica de navegación o cualquier otra acción.
• ListView: Envuelve los ListTile para permitir el desplazamiento si el menú tiene muchos elementos.

Ejemplo Completo

Dart

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mi Aplicación'),
      ),
      drawer: Drawer(
        // Agrega más opciones según tus necesidades
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Menú Lateral'),
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: const Text('Inicio'),
              onTap: () {
                // Navegar a la pantalla de inicio
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: const Text('Configuración'),
              onTap: () {
                // Navegar a la pantalla de configuración
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Contenido principal'),
      ),
    );
  }
}

Consideraciones Adicionales

• Personalización: Puedes personalizar el aspecto del menú lateral utilizando diferentes propiedades de los widgets como color, icon, title, etc.
• Navegación: Para navegar entre las diferentes pantallas de tu aplicación, utiliza Navigator.push o Navigator.pop.
• Responsividad: Los Drawer se adaptan automáticamente a diferentes tamaños de pantalla.
• Gestos: Los usuarios pueden abrir el menú lateral deslizando desde el borde izquierdo de la pantalla.