Streams en Flutter

Andrés Felipe Bedoya Alzate
Bancolombia Tech
Published in
6 min readFeb 3, 2021

Con los cambios que está realizando el Banco en la implementación de sus aplicaciones para mejorar los tiempos de desarrollo y el rendimiento, hay un termino que empezó a sonar con frecuencia: aplicaciones reactivas; y en mi búsqueda de entender qué significa, encontré que hace alusión a las aplicaciones dirigidas por eventos y cuando queremos construirlas, es necesario contar con aplicaciones basadas en flujos de datos asincrónicos, los cuales se conocen como Data Streams y debido a que no tengo mucho conocimiento en este tema, quise estudiarlo y ver su aplicación en el framework de desarrollo de aplicaciones móviles Flutter. Les comparto lo que encontré:

Streams

Lo primero que hice fue entender qué es un Stream y en mi búsqueda, encontré que hacían varias analogías para explicarlo. La más sencilla, es ver el Stream como un tubo, al cual un publicador le inserta datos de un lado (puede ser cualquier tipo de dato como un objeto, un mapa, una variable, un error, etc.) y del otro lado tenemos la salida de los datos que son ingresados al tubo. Cuando el dato llega a este lado, quienes estén pendientes de la salida pueden reaccionar realizando alguna tarea específica (pueden ser uno o más receptores los que estén atentos a la salida). El dato puede ser modificado dentro del Stream, si se requiere, para ser entregado a sus destinatarios.

Streams en Flutter

Una vez comprendido lo que es un Stream, lo siguiente era ver cómo se podían usar dentro del framework de desarrollo Flutter. Es importante tener en cuenta que Flutter está basado en el lenguaje de programación de Google llamado Dart, el cual tiene embebido el manejo de Streams. Para controlar un Stream debemos tener un StreamController, que hace las veces de publicador a través del método Sink.add o el método add (ambos hacen lo mismo), y de receptor con el método Stream.Listen para devolver una subscripción al Stream. Para modificar el dato dentro del Stream usamos funciones de StreamTransformer como filtros, reagrupaciones, modificaciones, etc.

Existen dos tipos de Streams: Single-Subscription Streams y Broadcast Streams. El primero permite tener un único receptor escuchando el Stream durante todo el tiempo de vida de este, incluso si el receptor deja de escuchar el Stream no puede llegar un nuevo receptor a intentar escucharlo. El segundo tipo de Stream si permite tener cualquier número de receptores.

Veamos un ejemplo sencillo de la declaración de los StreamController y su uso para publicar datos en el Stream, aplicar transformaciones y escuchar.

La salida en consola, luego de ejecutar el programa anterior, es la siguiente:

StreamBuilder

Para facilitar el uso de los Streams, Flutter nos ofrece un widget llamado StreamBuilder; este widget escucha un Stream y cada que llega un mensaje ejecuta la función pasada en el parámetro Builder. El uso de este widget permite que cuando un valor nuevo es emitido por el Stream, solo se vuelva a construir lo que tengamos dentro del builder y no todo el widget padre, ayudando al rendimiento de la aplicación.

Veamos cómo podemos hacer uso del StreamBuilder en nuestras aplicaciones:

Parámetros del widget StreamBuilder
Ejemplo de uso del Stream Builder

En el ejemplo anterior, hacemos el uso del StreamBuilder escuchando a través del StreamController llamado “controller”. Este widget presenta en pantalla un contenedor vacío mientras el Stream no emite datos. Una vez emite un dato, se presenta en pantalla un texto con el valor emitido. Si tuviéramos, por ejemplo, este StreamBuilder dentro de una pantalla más compleja con otros widgets, cuando el Stream emite un dato sólo se vuelve a construir la parte de la pantalla donde se presenta el texto, el resto de widgets permanecen igual, lo cual ayuda mucho al rendimiento de las aplicaciones.

RxDart

Hasta ahora hemos visto el uso de los Streams y todo lo que nos ofrece Flutter para trabajar con ellos; sin embargo, también debemos tener en cuenta que en el mercado existe un paquete llamado RxDart.

RxDart es la implementación de la especificación de ReactiveX para Dart. Está basado en los Streams de Dart y adiciona funcionalidades que facilitan, aún más, el manejo de Streams para nuestras aplicaciones. En RxDart cambian algunas nomenclaturas, por ejemplo el Stream pasa a ser un Observable y el StreamController ya se conoce como Subject, además viene con algunas variaciones respecto al StreamController que pueden ser de mucha utilidad para ciertos casos de uso de nuestras aplicaciones. Las principales variaciones del Subject es que tenemos un BehaviorSubject que permite al receptor obtener el último dato emitido por el Stream, antes de que éste comenzara a escuchar, y tenemos el ReplaySubject que permite al receptor obtener todos los datos que fueron emitidos por el Stream, antes de que éste comenzara a escuchar (recordemos que con el StreamController el receptor solo recibe los datos emitidos a partir de que comenzó a escuchar).

RxDart ofrece también muchas funcionalidades para la manipulación de los datos, así como lo hacen los StreamTransformers que tiene Dart, pero con mejoras que nos facilitan las implementaciones.

Conclusión

Vemos que Flutter nos ofrece varias herramientas para crear aplicaciones reactivas y que, de acuerdo con el escenario que más se acomode a nuestras necesidades, tenemos la flexibilidad de elegir la forma en que podemos realizar las implementaciones, ya sea usando StreamBuilder, o manejando los Streams desde un StatefullWidget, aplicando el SetState cuando nuestro stream emita datos o, inclusive, haciendo uso del patrón bloc (que no lo tratamos aquí, pero en los links que voy a dejar en las referencias nos presentan un ejemplo muy interesante para su uso) con los BlocProvider.

Espero que esta información sea útil para todos los que están investigando y buscando información acerca los Streams y que les sirva como un primer acercamiento al uso que podemos hacer de ellos en nuestras aplicaciones móviles con el Framework Flutter. A continuación, les comparto en las referencias, los enlaces de algunos sitios donde pueden encontrar más detalle y profundizar en la implementación de aplicaciones reactivas en Flutter.

Referencias

--

--