Inicio » Cursos » App restaurant con pedidos en Flutter

Curso App restaurant con pedidos en Flutter

Capitulo 8 ➜ Implementación de Tabs dinámicos

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.

Pasos para Implementar la Pantalla del Menú:

1. Importaciones

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';
 

2. Creación del Widget PantallaMenu

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();
}
 

3. Inicialización del Servicio API

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);
 

4. Uso de FutureBuilder

El FutureBuilder es el encargado de manejar la operación asíncrona que obtendrá los datos del menú. Este widget gestiona tres posibles estados:

  • Esperando: Cuando la operación aún no ha terminado.
  • Error: Si ocurre algún problema al obtener los datos.
  • Datos disponibles: Cuando la API responde con éxito y muestra los menús.

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
          }

5. Renderización de la Interfaz del Menú

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(),
              ));
        });
  }
} 

Descripción del Código:

  1. FutureBuilder:

    • Se usa para manejar la carga de datos desde la API, mostrando un CircularProgressIndicator mientras se espera la respuesta, un mensaje de error si falla, o el contenido del menú cuando los datos están disponibles.
  2. DefaultTabController:

    • Envuelve la estructura de la pantalla para gestionar la interacción con las pestañas de forma nativa en Flutter. El número de pestañas depende de la cantidad de menús que se obtengan desde la API.
  3. TabBar:

    • Muestra las pestañas en la parte superior de la pantalla. Cada pestaña representa un menú diferente, con nombres que se obtienen dinámicamente desde el resultado de la API.
  4. Estilización:

    • Se configura el color de fondo con Colors.amber para la pantalla y se utilizan colores contrastantes para las pestañas (texto blanco cuando no está seleccionado, y rojo cuando está seleccionado).

2037 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