Menú vertical en Flutter – Dart

Tiempo de lectura: 2 minutos

En este ejemplo hago un menú vertical en Flutter usando el lenguaje Dart. El código y el resultado se muestran a continuación:

Para el diseño de la interfaz, se utiliza un Row para dividir la pantalla en dos partes: el menú vertical y el contenido a la derecha. El menú vertical se crea como una ListView que contiene varias opciones (ListTile). El contenido dinámico se muestra en la parte derecha y cambia según la opción seleccionada en el menú.

Creo un método y como ejemplo lo vamos a llamar actualizarContenido(), en el que iremos cambiando el contenido según la opción seleccionada. Actualiza la variable contenido cuando se selecciona una opción en el menú. Se utiliza setState() para indicar a Flutter que debe redibujar la interfaz de usuario con el nuevo contenido.

A continuación dejo el código usado para el ejemplo de menú vertical en Flutter

En la siguiente imagen se observa el resultado.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menú Vertical Flutter'),
        ),
        body: MenuVertical(),
      ),
    );
  }
}

class MenuVertical extends StatefulWidget {
  @override
  _MenuVerticalState createState() => _MenuVerticalState();
}

class _MenuVerticalState extends State<MenuVertical> {
  String contenido = 'Contenido inicial';

  void actualizarContenido(String opcionSeleccionada) {
    setState(() {
      contenido = 'Contenido de $opcionSeleccionada';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          width: 200,
          color: Colors.blue,
          child: ListView(
            children: <Widget>[
              ListTile(
                title: Text('Inicio'),
                onTap: () => actualizarContenido('Inicio'),
              ),
              ListTile(
                title: Text('Menú Opción 2'),
                onTap: () => actualizarContenido('Menú Opción 2'),
              ),
              ListTile(
                title: Text('Menú Opción 3'),
                onTap: () => actualizarContenido('Menú Opción 3'),
              ),
              ListTile(
                title: Text('Menú Opción 4'),
                onTap: () => actualizarContenido('Menú Opción 4'),
              ),
            ],
          ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(16),
            color: Colors.white,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Menú Vertical Flutter',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 16),
                Text(
                  contenido,
                  style: TextStyle(fontSize: 16),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Por último ejecutamos y vemos el resultado.

Espero que les sirva de ayuda y que tengan un feliz día!