En este punto, profundizaremos en el manejo de eventos y estados en el patrón Bloc.

Aprenderemos cómo enviar eventos al Bloc, cómo

procesarlos y cómo actualizar el estado en consecuencia.
6. Manejo de eventos y estados
En el patrón Bloc, los eventos son las acciones o notificaciones que ocurren en la aplicación y que pueden desencadenar un cambio en el
estado. Los eventos se envían al Bloc para que este los procese y actualice el estado correspondiente.
Veamos cómo manejar eventos y estados en el patrón Bloc:
1. Definición de eventos: Comenzamos definiendo los eventos que pueden ocurrir en nuestra aplicación. Los eventos son clases que
extienden una clase base BlocEvent . Cada evento representa una acción o notificación específica. Por ejemplo, en una aplicación de
carrito de compras, podemos tener eventos como AddToCartEvent , RemoveFromCartEvent , etc.
abstract class CartEvent extends BlocEvent {}

class AddToCartEvent extends CartEvent {

final Product product;

AddToCartEvent(this.product);
}

class RemoveFromCartEvent extends CartEvent {

final Product product;

RemoveFromCartEvent(this.product);
}

En este ejemplo, hemos definido dos eventos: AddToCartEvent y RemoveFromCartEvent . Cada evento lleva datos adicionales relevantes
para la acción, como el producto que se agrega o elimina del carrito.
2. Procesamiento de eventos en el Bloc: Luego, en la clase Bloc, implementamos el método mapEventToState para procesar los eventos y
actualizar el estado en consecuencia. Este método toma un evento como entrada y devuelve un flujo de estados.
import 'package:bloc/bloc.dart';
import 'cart_event.dart';
import 'cart_state.dart';

class CartBloc extends Bloc<CartEvent, CartState> {

CartBloc() : super(CartStateInitial());

@override
Stream<CartState> mapEventToState(CartEvent event) async* {
if (event is AddToCartEvent) {
final updatedCart = (state as CartStateInitial).cart + event.product;
yield CartStateLoaded(updatedCart);
} else if (event is RemoveFromCartEvent) {
final updatedCart = (state as CartStateInitial).cart - event.product;
yield CartStateLoaded(updatedCart);
}
}
}

En este ejemplo, CartBloc es nuestra clase Bloc que extiende Bloc del paquete bloc . En el método mapEventToState , procesamos los
eventos y actualizamos el estado en consecuencia.
Si recibimos un evento AddToCartEvent , accedemos al estado actual ( CartStateInitial ), agregamos el producto del evento al carrito y
emitimos un nuevo estado CartStateLoaded con el carrito actualizado.
Si recibimos un evento RemoveFromCartEvent , accedemos al estado actual, eliminamos el producto del evento del carrito y emitimos un
nuevo estado CartStateLoaded con el carrito actualizado.
3. Actualización de la interfaz de usuario: Finalmente, en la interfaz de usuario, utilizamos BlocBuilder para escuchar los cambios de
estado y actualizar la interfaz de usuario en consecuencia.
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'cart_bloc.dart';
import 'cart_event.dart';
import 'cart_state.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: BlocProvider(
create: (context) => CartBloc(),
child: CartPage(),
),
);
}
}

class CartPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
final CartBloc cartBloc = BlocProvider.of<CartBloc>(context);

return Scaffold(
appBar: AppBar(
title: Text('Cart Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlocBuilder<CartBloc, CartState>(
builder: (context, state) {
if (state is CartStateInitial) {
return Text(
'Cart: ${state.cart}',
style: TextStyle(fontSize: 24),
);
}
return Text('Error');
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
final product = Product(name: 'Product 1', price: 10);
cartBloc.add(AddToCartEvent(product));
},
child: Text('Add to Cart'),
),
ElevatedButton(
onPressed: () {
final product = Product(name: 'Product 1', price: 10);
cartBloc.add(RemoveFromCartEvent(product));
},
child: Text('Remove from Cart'),
),
],
 ),
),
);
}
}

En este ejemplo, utilizamos BlocBuilder para construir la interfaz de usuario en función del estado actual del Bloc.
En el builder de BlocBuilder , verificamos el tipo de estado y mostramos el contenido del carrito si el estado es CartStateInitial .
Al presionar los botones "Add to Cart" y "Remove from Cart", enviamos los eventos correspondientes al Bloc ( AddToCartEvent y
RemoveFromCartEvent ) utilizando cartBloc.add(event) .

La interfaz de usuario se actualizará automáticamente cuando el Bloc emita un nuevo estado, lo que reflejará los cambios en el contenido del
carrito mostrado.
Recuerda que este es solo un ejemplo básico para comprender el manejo de eventos y estados en el patrón Bloc. A medida que avances,
encontrarás escenarios más complejos donde podrás procesar eventos de manera más sofisticada y actualizar el estado de manera más
precisa.
Continuaremos en el próximo punto del temario, donde exploraremos cómo realizar pruebas unitarias en el patrón Bloc en Flutter.