Flutter patrón BLoC para principiantes como Yo
Hola a todos, aquí de nuevo con una traducción más para la comunidad Flutter en español; esta vez con un artículo original de Oliver Atienza y lo puedes encontrar aquí.
Los patrones de diseño son una forma segura de hacer que tus proyectos sean escalables, mantenibles y optimizados. En Google I /O 2018, Google introdujo el patrón BLoC. Me tomó un poco de tiempo entender el concepto totalmente y poder utilizarlo realmente en uno de mis proyectos. Para ayudar a mis colegas desarrolladores, detallé a continuación mi proceso de integración de BLoCs en las aplicaciones que desarrollo. Espero que compartir esto pueda ayudar a otros desarrolladores a entender el patrón fácilmente.
Por supuesto, tuve que seguir un par de tutoriales y blogs relacionados para poder compartir esta información y le recomiendo que los lea primero, ya que esta será una descripción de alto nivel de mi proceso . Estos son algunos de los materiales que estudié:
- https://www.youtube.com/watch?v=LeLrsnHeCZY
- https://medium.com/@Thebro_11/flutter-todos-tutorial-con-flutter-bloc-aeb2d42a1824
- https://www.youtube.com/watch?v=Un7eG5hHNPg
Ahora, veamos cómo uso el patrón BLoC.
Nota: He estado utilizando el flutter_bloc y el bloc de Felix Angelov para simplificar la implementación del patrón de diseño, pero asegúrate de leer las referencias enumeradas anteriormente para que puedas comprender el funcionamiento interno del patrón.
Crea un BLoC para cada pantalla o página
A veces, incluso saber por dónde empezar ayuda mucho . Inmediatamente, crea la carpeta lib/bloc y un BLoC para cada página. Cada página de su aplicación debe tener su propio BLoC padre . Si una página tiene elementos secundarios que cree que deberían tener su propio BLoC, cree un BLoC independiente para que el padre se suscriba a los cambios de estado del hijo y lo maneje en consecuencia.
Por ejemplo, si hay un widget ListView en la pantalla y el contenido de esa lista se basa en los datos recuperados de la base de datos, entonces seguramente debería tener su propio BLoC. Si algo necesita actualizarse en la pantalla después de cargar los datos aparte de la lista, el BLoC primario de la pantalla puede manejarlo con la ayuda de las suscripciones.
Abordarlo por pantalla
Ya que hay toneladas de herramientas de creación de prototipos y estructuras de cableado como Adobe XD y Sketch, ahora es más fácil tener una visión general de las pantallas de una aplicación. Lo que me funciona es examinar cada pantalla y decidir qué widgets necesitan realizar un seguimiento de un estado, que por lo tanto necesitará un BLoC.
También es importante saber si un widget necesitará un BLoC. Este patrón de diseño puede parecer un poco excesivo para tareas simples y la razón de ello es que es excesivo . Para esta parte, creo que depende de tu preferencia. Me gusta tener todo en un BLoC, pero a veces tenerlo es demasiado complicado.
Me gusta hacerlo de esta manera porque, a veces, no conocerías las funcionalidades de una pantalla al cien por cien hasta que la implementes. Seguro que puede pasar una cantidad considerable de tiempo pensando y escribiendo, pero siempre hay algo que agregar en la implementación.
Enumerar los eventos.
Lo siguiente es saber qué eventos están sucediendo dentro de una pantalla o un widget que debería causar un cambio de estado. Como saben, los cambios de estado ocurren cuando se envía un evento a un BLoC. Entonces, enumera los eventos en forma verbal de la siguiente manera:
FetchDataUpdateTabGetUserIdAddToCart
Aquí hay una muestra de uno de mis proyectos. Contiene eventos que suceden con objetos de datos de conversación / conversación . También he puesto en práctica el uso del paquete Flutter equatable. Como puedes ver, puedes pasar fácilmente parámetros a una clase Event si el BLoC lo necesita para sus cálculos. Aquí, en la clase FetchConvos de evento, userIdse pasa a las entidades de recuperación Convo para un usuario específico.
Enumerar los estados
Lo que me impidió usar el patrón BLoC durante tanto tiempo es que no he visto un simple ejemplo práctico de su uso. Realmente no sabía qué poner dentro de los estados. Entonces, piense en esto, qué variables o datos utilizará mi aplicación en ciertos estados . ¿Eso es exactamente lo que debe contener un State, y cómo los contendrá ? A través de propiedades, ya que un estado es realmente una clase simple.
Al enumerar primero los eventos, se aclara que estados deberían salir del BLoC. Para el ejemplo anterior, sí tengo el evento FetchConvos, mi mente inmediatamente pensará que uno de los estados debería ser ConvosLoaded o ConvosFetched. Siempre mantengo esta mentalidad para no tener que preocuparme por nombrar mis eventos y mis estados en consecuencia. Además, siempre me aseguro de tener un estado inicial para cada uno de mis BLoC para ayudar con la creación de instancias.
Construir el bloc
Desde el mismo nombre, Business Logic Component, el BLoC debe ser capaz de manejar el negocio que puede incluir, consultar la inserción de datos en la base de datos, la recuperación de datos de la base de datos y los números de cómputo. Lo que es importante entender aquí es: Event-in, State-out. Independientemente de los cálculos u operaciones lógicas que ocurran dentro de un BLoC, se deben entregar a los componentes de la interfaz de usuario a través de unState.
Al utilizar el paquete flutter_bloc, todo sucede en la función mapEventToState.
Como puedes ver, llama a la función _mapFetchConvosToState, se encarga de la parte lógica que es la recuperación de la lista de objetos Convoy luego genera el estado ConvosLoaded, con la lista dentro de ella como su propiedad.
Usa el bloc
De acuerdo, todo lo que he creado ha sido para configurar un BLoC. ¿Entonces, cómo se usa? Con la ayuda del paquete Flutter, esto es extremadamente simple. Primero, haces uso de tres widgets.
BlocProvider
Desde el nombre en sí mismo, proporciona un BLoC a sus hijos donde sea que esté en el árbol de widgets. Aquí es cómo se usa:
A modo de ejemplo, solo puse un childContainer, pero imagino que si se trata de un widget con muchos más widgets secundarios, entonces todos esos widgets podrán acceder a los estados dentro del BLoC a través de BlocProvider.
BlocProviderTree
Esto funciona exactamente igual que BlocProvider solo que con la capacidad de suministrar múltiples BLoCs a la vez en lugar de encadenar BlocProviders.
BlocBuilder
Básicamente, se trata de un widget que se reconstruye automáticamente cada vez que el BLoC proporcionado hace un cambio de estado. Toma bloc como parámetro y como función el builder.
Para referirse nuevamente al BLoC que fue proporcionado por un BlocProvider o un BlocProviderTree, se usa la sintaxis BlocProvider.of<NameOfBlocClass>(context). Dentro de la función del constructor hay una variable state que es una referencia al estado activo actual de BLoC, y depende de la capa de presentación verificar si el estado está activo y presentar los componentes de IU en consecuencia.
Ahora que todo está configurado, lo que queda es solo activar un Event para que el BLoC genere un State.
La función de despacho
Para ingresar una entradaEvent a un BLoC, use la función dispatch. Simple como eso.
¡Y eso es!
Algunas notas
- En cualquier lugar en el que se ejecute la instancia de BLoC , asegúrese de que se trata de una
StatefulWidget.Para la eliminación correcta de los BLoC, simplemente llame a un BLoCdisposepara limpiarlo. - Mencioné el uso de un BLoC principal para cada página para ayudar a los BLoC secundarios a comunicarse entre ellos a través de suscripciones; asegúrate de disponer de esas suscripciones para mejorar el rendimiento de la aplicación.
- Sería útil crear un archivo barril(archivos desde los cuales exportamos una o más cosas).
- También puede echar un vistazo a
BlocDelegatepara ayudar con la depuración o simplemente adaptar el comportamiento de los BLoC a sus necesidades.
Para más información, echa un vistazo al Github oficial del Bloc .
Conclusión
Sé que este proceso no es el mío. Es probable que muchos desarrolladores tengan estos pasos exactos o incluso mejores, pero solo explicarlo de esta manera (incluso para mí) realmente me ha ayudado a entender el complicado patrón BLoC. En realidad, este proceso es muy similar al tutorial de Felix Angelov , solo quería sintetizar todos mis aprendizajes al respecto ya que encuentro a muchas personas como yo que realmente entienden conceptualmente el patrón de diseño pero que ha tenido problemas para implementar eso. Sé que esto es solo una descripción general de alto nivel de la implementación del patrón BLoC, pero espero que esto ayude a simplificar muchas cosas para usted.
Si este artículo te ayudara, un buen sería bueno y posiblemente compartirlo para ayudar a otros también. ¡Esta es mi primera publicación en el blog, así que me encantaría escuchar sus opiniones y sugerencias!
Leer algunas de mis arículos y traducciones recientes de artículos sobre Flutter.
Si este artículo te ayudo en algo incluso en una o dos cosas, aplauda tantas veces como pueda para mostrar su apoyo. 👏
Soy Eduardo Coto. Técnico de computadoras, miembro de la comunidad flutter en español y desarrollador flutter.
Puedes encontrarme en GitHub
Sígueme en Twitter.
