Curso App restaurant con pedidos en Flutter
Implementación del Icono de Notificación para el Carrito de Compras
En esta lección aprenderás a implementar un icono interactivo de carrito de compras con una notificación visual que indica la cantidad de ítems en el carrito. Utilizaremos Provider para gestionar el estado del carrito y actualizar dinámicamente el número de productos que contiene.
En esta lección aprenderás a implementar un icono interactivo de carrito de compras con una notificación visual que indica la cantidad de ítems en el carrito. Utilizaremos Provider
para gestionar el estado del carrito y actualizar dinámicamente el número de productos que contiene. También configuraremos una navegación hacia la pantalla del carrito al hacer clic en el icono.
CartIcon
La clase CartIcon
es un widget sin estado (StatelessWidget
) que representará el icono del carrito de compras y la notificación de cantidad.
dart
class CartIcon extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<CartProvider>(
builder: (_, cart, __) => Stack(
children: [
Consumer
para Actualizar el Estado del CarritoUtilizamos el widget Consumer
para escuchar cambios en el estado del carrito desde el CartProvider
. Esto asegura que cada vez que el usuario añada o elimine productos, el número de ítems en la notificación se actualice automáticamente.
dart
return Consumer<CartProvider>(
builder: (_, cart, __) => Stack( // Escucha los cambios en el carrito
children: [
El IconButton
muestra el icono del carrito de compras y permite la navegación hacia la pantalla del carrito (PantallaCart
) cuando se hace clic en él.
dart
IconButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => PantallaCart())); // Navegación a la pantalla del carrito
},
icon: Icon(Icons.shopping_cart)),
Se usa Positioned
para colocar la notificación en la esquina superior derecha del icono del carrito. Si el carrito tiene ítems (cart.totalItems > 0
), se muestra un contenedor rojo con el número de ítems dentro, de lo contrario, el contenedor estará vacío.
dart
Positioned(
right: 5,
top: 5,
child: cart.totalItems > 0
? Container(
padding: EdgeInsets.all(3),
decoration: BoxDecoration(
color: Colors.red, // Fondo rojo para la notificación
borderRadius: BorderRadius.circular(10)),
constraints: const BoxConstraints(
minWidth: 10,
minHeight: 5
),
child: Text(
cart.totalItems.toString(), // Mostrar el número de ítems
style: TextStyle(color: Colors.white), // Texto en blanco
),
)
: Container()) // Contenedor vacío si no hay ítems
],
),
);
}
}
Consumer<CartProvider>
:
Stack
:
IconButton
:
Positioned
:
Condición cart.totalItems > 0
:
1561 visitas
« Capítulo 10 – Carrito de Compra: Agregar un item
Capítulo 12 – Carrito de Compra: Lista de Items »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025