Inicio » Cursos » App restaurant con pedidos en Flutter

Curso App restaurant con pedidos en Flutter

Capitulo 9 ➜ Mostrar la lista de items del menú

Implementación de la Lista de Ítems por Menú en el TabBar de la App de Restaurante

En esta lección, aprenderás a implementar la visualización de los ítems de un menú específico dentro de la Pantalla de Menú de la aplicación de restaurante en Flutter. Utilizaremos FutureBuilder para obtener los ítems desde una API y organizarlos en función del menú al que pertenecen.

En esta lección, aprenderás a implementar la visualización de los ítems de un menú específico dentro de la Pantalla de Menú de la aplicación de restaurante en Flutter. Utilizaremos FutureBuilder para obtener los ítems desde una API y organizarlos en función del menú al que pertenecen. Estos ítems se mostrarán dentro del TabBarView, donde cada pestaña del menú desplegará su respectiva lista de ítems.


Pasos para Implementar la Lista de Ítems por Menú:

1. Definición del Método _buildItemList

El método _buildItemList se encargará de gestionar la carga de los ítems desde la API y asignar estos ítems a su menú correspondiente.


 

dart

Widget _buildItemList(BuildContext context, List<Menu> menus) {
    return FutureBuilder(
        future: apiService.fetchItems(),  // Llamada a la API para obtener los ítems
        builder: (context, snapshot) {

2. Manejo de los Estados de FutureBuilder

Similar a las lecciones anteriores, gestionamos tres estados:

  • Cargando: Muestra un CircularProgressIndicator mientras se obtienen los datos.
  • Error: Muestra un mensaje de error si ocurre un fallo en la llamada a la API.
  • Sin datos: Muestra un mensaje en caso de que no haya ítems disponibles.

 

dart

          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());  // Indicador de carga
          } else if (snapshot.hasError) {
            return Center(child: Text("Error: ${snapshot.error}"));  // Manejo de errores
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text("No hay ítems disponibles"));  // Sin datos
          }

3. Organización de los Ítems por Menú

Una vez que los datos se obtienen con éxito, se organizan los ítems según el menú al que pertenecen. Utilizamos un mapa (itemsByMenu) para almacenar los ítems agrupados por el menuId de cada ítem.


 

dart

          final items = snapshot.data!;
          final itemsByMenu = <int, List<Item>>{};
          for (var item in items) {
            itemsByMenu.putIfAbsent(item.menuId, () => []).add(item);  // Agrupar ítems por menú
          }

4. Visualización de los Ítems en el TabBarView

Dentro de TabBarView, iteramos sobre los menús y para cada uno, buscamos los ítems correspondientes en el mapa itemsByMenu. Si el menú tiene ítems asociados, se muestran en el widget ItemList.


 

dart

          return TabBarView(
              children: menus.map((menu) {
                final _items = itemsByMenu[menu.id] ?? [];  // Obtener ítems del menú actual
                return ItemList(items: _items);  // Mostrar la lista de ítems
              }).toList()
          );
        });
  }

Explicación del Código:

  1. FutureBuilder:

    • Llama al servicio de la API para obtener los ítems y gestiona los estados de carga, error y datos vacíos.
  2. Organización de Ítems por Menú:

    • Usamos un mapa (itemsByMenu) para almacenar los ítems y agruparlos según su menuId. Esto permite que cada pestaña del menú en el TabBarView muestre los ítems correctos.
  3. TabBarView:

    • El TabBarView permite que los usuarios naveguen entre las pestañas del menú. Para cada menú, se muestra una lista de ítems correspondiente a esa categoría.
  4. ItemList:

    • ItemList es un widget personalizado (debería estar previamente definido) que se encarga de renderizar la lista de ítems para cada menú.

2786 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025