Curso App restaurant con pedidos en Flutter
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.
_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) {
FutureBuilder
Similar a las lecciones anteriores, gestionamos tres estados:
CircularProgressIndicator
mientras se obtienen los datos.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
}
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ú
}
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()
);
});
}
FutureBuilder
:
Organización de Ítems por Menú:
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.TabBarView
:
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.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
« Capítulo 8 – Implementación de Tabs dinámicos
Capítulo 10 – Carrito de Compra: Agregar un item »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025