Curso App restaurant con pedidos en Flutter
Implementación de la Pantalla de Menú Dinámico en la App de Restaurante con Flutter
En esta lección, aprenderás a implementar la pantalla de Menú en tu aplicación de restaurante utilizando Flutter. A través del uso de FutureBuilder, obtendremos los datos de los menús de una API y los mostraremos de manera dinámica en un conjunto de pestañas (tabs).
En esta lección, aprenderás a implementar la pantalla de Menú en tu aplicación de restaurante utilizando Flutter. A través del uso de FutureBuilder
, obtendremos los datos de los menús de una API y los mostraremos de manera dinámica en un conjunto de pestañas (tabs). Además, gestionaremos los distintos estados de la operación asíncrona como la carga de datos, el manejo de errores y la presentación de la interfaz cuando los datos estén disponibles.
Se incluyen los paquetes necesarios, como el servicio de API que hemos creado anteriormente y una utilidad con las constantes de la aplicación, junto con el paquete flutter/material.dart
para el diseño de la interfaz.
dart
import 'package:apprestaurant/services/api_service.dart';
import 'package:apprestaurant/utils/constans.dart';
import 'package:flutter/material.dart';
La clase PantallaMenu
es un StatefulWidget, ya que necesitamos actualizar el estado de la pantalla en función de los datos obtenidos de la API.
dart
class PantallaMenu extends StatefulWidget {
const PantallaMenu({super.key});
@override
State<PantallaMenu> createState() => _PantallaMenuState();
}
Dentro del estado (_State) de la pantalla, inicializamos una instancia de la clase ApiService
, la cual se encargará de hacer la petición HTTP para obtener el menú desde la base URL definida en las constantes de la aplicación.
dart
class _PantallaMenuState extends State<PantallaMenu> {
final ApiService apiService = ApiService(Constants.apiBaseUrl);
El FutureBuilder
es el encargado de manejar la operación asíncrona que obtendrá los datos del menú. Este widget gestiona tres posibles estados:
dart
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: apiService.fetchMenus(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator()); // Indicador de carga mientras se esperan los datos
} else if (snapshot.hasError) {
return Center(child: Text("Error: ${snapshot.error}")); // Muestra un error si ocurre
} else if (!snapshot.hasData || snapshot.data!.isEmpty) {
return Center(child: Text("No hay menú disponible")); // Caso en que no haya datos
}
Una vez que los datos se han cargado correctamente, se muestra un TabBar
dinámico, con una pestaña para cada menú. Estos menús se obtienen directamente del snapshot.data
, que contiene la información recibida desde la API.
dart
final menus = snapshot.data!; return DefaultTabController( length: menus.length, // Número de pestañas según la cantidad de menús disponibles child: Scaffold( backgroundColor: Colors.amber, appBar: AppBar( backgroundColor: Colors.amber, title: Text("Menú a la carta"), bottom: TabBar( unselectedLabelColor: Colors.white, labelColor: Colors.red, indicatorColor: Colors.red, dividerColor: Colors.transparent, tabs: menus .map((menu) => Tab( child: Text(menu.name), // El nombre de cada menú )) .toList()), ), drawer: null, // Sin drawer en esta pantalla body: Container(), )); }); } }
FutureBuilder:
DefaultTabController:
TabBar:
Estilización:
2037 visitas
« Capítulo 7 – Diseño de la interface de inicio
Capítulo 9 – Mostrar la lista de items del menú »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025