BLoC vitaminado: Freezed + flutter_bloc

¡Buenas a todos y todas! En este artículo veremos cómo nos ayudan las Sealed Class implementando el patrón bloc en nuestras aplicaciones de Flutter y Dart.

Photo by James Harrison on Unsplash

Introducción

Para poder seguir bien este post, te recomiendo conocer que son las Sealed o Union Class y que ventajas añaden a tu código. Te dejo por aquí el vídeo que hice explicando como implementarlas en Dart

Teniendo en cuenta que las Sealed Class nos permiten una herencia muy controlada y con varios métodos para poder diferenciar entre las diferentes subclases, nos viene como anillo al dedo para poder diferenciar entre los eventos/estados de nuestro BLoC, ya que todos heredan de un evento/estado padre.

Factorías

Utilizando la sintaxis de la Sealed Class, tenemos una forma más clara de generar nuevas herencias de nuestra clase evento/estado padre.

Sin las Sealed Class, la forma de crear nuevas instancias era extender de la clase abstracta del evento/estado dentro del mismo fichero. Si queremos que estas clases lleven información, tenemos que crear las propiedades y el constructor de la clase. Como en este ejemplo

Utilizando la sintaxis que nos ofrece el paquete Freezed tenemos una organización mejor de los diferentes eventos/estados que vayamos implementando.

Con esta forma de crear las diferentes instancias de nuestras clases, queda más claro la clase de la que está heredando cuando se lanzan estos eventos

Diferenciar eventos

Gracias a los métodos que nos ofrecen las Sealed Class para diferenciar los diferentes tipos de eventos (Subclases de la clase abstracta Event), podemos organizar mejor el apartado del BLoC que mapea los eventos con los métodos que los manejan. Podemos pasar de esta organización

A esta organización

Con la gran ventaja añadida, que el operador when nos va a obligar a implementar el callback relacionado a la clase que hemos creado, por lo que evitamos el error, en tiempo de ejecución, que los eventos no sean tratados.

UI

A la hora de procesar los estados que emite nuestro BLoC nos permite tener una sintaxis mucho más clara, pudiendo mapear de una manera bastante sencilla que se debe mostrar en la UI dependiendo del estado actual.

Utilizando el Widget BlocBuilder, que nos ofrece el paquete flutter_bloc, tenemos un callback que se ejecutará por cada nuevo estado y requiere que se devuelva un Widget a mostrar. Sin las Sealed class podríamos tener algo así

Utilizando los métodos como map, when, maybeMap y maybeWhen, podemos dejar más claro que debe hacer la UI en cada estado

Con el uso de las Sealed Class tenemos dos ventajas claras:

1. Es más fácil diferenciar que Widget representa cada estado, no tenemos que ir anidando ifs, además de recibir la información como parámetro de la función, lo que hace que se genere menos código que llamar al objeto state
2. Como hemos visto anteriormente, este método te va a obligar a implementar un callback por cada estado nuevo. Esto permite tener un contrato con el desarrollador que va a implementar la UI.

Bonus

A parte de todos los beneficios de las Sealed Class, también tenemos características muy interesantes del paquete Freezed.

1. copyWith: Este método, implementado automáticamente, nos permite poder copiar instancias con nueva información. Es muy útil cuando queremos que un estado almacene toda la información y la vayamos modificando en el flujo de nuestra app.
2. ==/toString: Estos métodos, también implementados de forma automática, permite que se puedan diferenciar instancias del mismo objeto si su información es diferente. Si te has peleado un poco con BLoC, conocerás de sobra el problema de mandar dos veces el mismo estado, que la UI no se refresque aunque haya cambiado información.

Resumen

Las Sealed Class nos ofrecen muchas ventajas, pero en este contexto aún más. Los métodos como el map o when nos permite eliminar parte de código y hacer más limpia su lectura en este caso, cuando implementamos un patrón que necesita de diferentes clases para trabajar.

Además de las características adicionales que nos ahorran mucho tiempo como desarrolladores al implementar funcionalidades repetitivas como los métodos de copyWith y ==/toString.

En este enlace puedes ver el vídeo sobre el contenido del artículo:

Por ultimo dejo os mi twitter donde me encontraréis hablando sobre tecnología en general pero sobre todo Flutter 💙

¡Un saludo y hasta la próxima!