Cómo Crear un TopMenu en Flutter

Tiempo de lectura: 2 minutos

Paso 1: Configura tu proyecto Flutter

1. Crea un nuevo proyecto Flutter si aún no tienes uno. Abre una terminal y ejecuta: flutter create top_menu_example
2. Navega al directorio del proyecto: cd top_menu_example

Paso 2: Define la clase TopMenuItem

1. Crea una nueva clase TopMenuItem para representar cada ítem del menú. Crea un archivo llamado top_menu_item.dart dentro del directorio lib y define la clase allí:

import 'package:flutter/material.dart';

class TopMenuItem {
  final IconData? icon;
  final String value;
  final String section;

  TopMenuItem({
    this.icon,
    required this.value,
    required this.section,
  });
}

Paso 3: Crea el widget TopMenu

1. Define el widget TopMenu que mostrará los ítems del menú en una fila. Crea un archivo llamado top_menu.dart en el directorio lib y define el widget allí:

import 'package:flutter/material.dart';
import 'top_menu_item.dart'; // Asegúrate de importar la clase TopMenuItem

class TopMenu extends StatelessWidget {
  final List<TopMenuItem> items;
  final String selectedSection;
  final Function(String) onSectionChanged;

  TopMenu({
    required this.items,
    required this.selectedSection,
    required this.onSectionChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: items.map((item) {
        final isSelected = item.section == selectedSection;
        return GestureDetector(
          onTap: () {
            onSectionChanged(item.section);
          },
          child: Column(
            children: [
              if (item.icon != null)
                Icon(
                  item.icon,
                  color: isSelected ? Colors.blue : Colors.black,
                ),
              Text(
                item.value,
                style: TextStyle(
                  color: isSelected ? Colors.blue : Colors.black,
                  fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ],
          ),
        );
      }).toList(),
    );
  }
}

Paso 4: Usa el widget TopMenu en tu aplicación

1. Modifica el archivo main.dart para usar el widget TopMenu. Aquí está un ejemplo completo:

import 'package:flutter/material.dart';
import 'top_menu.dart';
import 'top_menu_item.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _currentSection = 'home';

  void _onSectionChanged(String newSection) {
    setState(() {
      _currentSection = newSection;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<TopMenuItem> menuItems = [
      TopMenuItem(icon: Icons.home, value: 'Home', section: 'home'),
      TopMenuItem(icon: Icons.search, value: 'Search', section: 'search'),
      TopMenuItem(value: 'Settings', section: 'settings'), // Sin ícono
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Top Menu Example'),
        ),
        body: Column(
          children: [
            TopMenu(
              items: menuItems,
              selectedSection: _currentSection,
              onSectionChanged: _onSectionChanged,
            ),
            Expanded(
              child: Center(
                child: Text(
                  'Current section: $_currentSection',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Explicación

1. Clase TopMenuItem: Define los datos para cada ítem del menú, incluyendo un ícono opcional (IconData?), el texto (value), y una sección identificadora (section).
2. Widget TopMenu: Muestra una fila de ítems del menú. El ítem seleccionado se resalta con un color y un estilo de texto diferente. Usa un GestureDetector para manejar los toques en cada ítem y llama a la función onSectionChanged para actualizar la sección seleccionada.
3. Uso del TopMenu: En el widget principal (MyApp), se define una lista de ítems del menú y se pasa al widget TopMenu, junto con la sección seleccionada y la función para manejar los cambios de sección.