Flutter Provider: Qué es, para qué sirve y cómo utilizarlo

Flutter tiene librerías de desarrollo que apalancan nuestras soluciones digitales, una de ellas, muy poderosa, es denominada Provider. En este artículo te contaré que bondades tiene y por qué deberías utilizarla en la mayoría de tus escenarios y aplicaciones.

Cuando ingresas a la documentación oficial de Flutter te definen el Provider de la siguiente forma: “es un wrapper del InheritedWidget para hacer más fácil su implementación y más reutilizable”. Entonces con esto damos por terminado el artículo…😂. Desde luego que no.

Esta definición nos ayuda a entender por qué nació esta herramienta. Como siempre comento, si queremos comprender una herramienta hay que analizar qué problema solucionó.

Compartir información entre el árbol de widgets

Imaginemos que deseamos compartir información a través del árbol de widgets y que cada vez que viajamos de una pantalla a otra, tuviéramos que compartir entre ellas una entidad con la data común ¿qué tan coherente te parecería esto? Realmente, esto no resulta muy eficiente.

Debido a lo anterior, el equipo de Flutter inventó los InheritedWidgets. Estos, permiten compartir la información a todo el árbol de widgets. Por lo general, suelen ser el widget padre de los demás.

Sin embargo, al utilizar los InheritedWidgets era algo complejo de implementar y, en ocasiones, sentías que necesitabas herramientas que facilitaran el consumo y la actualización de datos. Allí nace el paquete Provider el cual extiende del InheritedWidget y facilita el manejo de información a lo largo del árbol de widgets.

En el gráfico anterior, se ve el comportamiento del Provider. Al ser el padre de todos los widgets, puede compartir la información con quién la necesite y a su vez el consumidor puede actualizar la información de su padre.

Ahora que entendimos qué es Provider y para qué sirve, vamos a aprender a configurarlo y utilizarlo.

Ejemplo App demo con Provider

Instalar provider no es una tarea compleja, en nuestro archivo pubspec.yaml únicamente debemos agregarlo en nuestras dependencias :

dependencies:
  flutter:
    sdk: flutter
  provider:version

Con esto listo, tienes a tu disposición varias herramientas:

• ChangeNotifier: Se debe extender de esta clase para proporcionar un objeto que sirva para enviar notificaciones de cambio a sus oyentes.
• ChangeNotifierProvider: escucha los cambios de un ChangeNotifier. Los widgets hijos de este pueden acceder al objeto de estado y escuchar los cambios en el mismo.
• Consumer: reconstruye parte de un subárbol cuando cambia el estado que escucha.
• Provider.of: permite que los widgets descendientes accedan al objeto de estado.

Construyendo nuestro primer Provider

Teniendo esto presente comencemos por crear un Provider:

Como se observa en el código la clase extiende del ChangeNotifier. En este escenario, el CatProvider está compartiendo el valor del nombre de un gato. Este valor, puede ser consultado o modificado por sus descendientes. Eso sí como se ve en la función set es necesario notificar a los escuchadores empleando el método notifyListeners.

Ahora que tienes listo tu primer provider puedes comenzar a utilizarlo. Recuerda que en la teoría vimos que podría ser el widget padre de los demás Widget, esto indica que si deseamos que sea visible a toda la aplicación podría ser de la siguiente forma:

Como vez, el ChangeNotifierProvider es el widget principal en el árbol de widgets. Por lo tanto, todos los widgets de la aplicación pueden acceder al nombre del gato establecido en el CatProvider y modificarlo. Ante el cambio, todos los widgets suscritos al valor serán notificados.

Múltiples Providers

En el desarrollo de una APP puede ser que necesitemos de varios Providers. Ante esto, ¿qué podemos hacer? Bueno, la librería Provider nos regaló una solución, denominada MultiProvider. MultiProvider admite una lista de ChangeNotifierProviders que podrán compartir con los hijos su información, se configura de la siguiente manera :

Como ves, el MultiProvider es el padre de todos los widgets de la aplicación de forma que todos tienen acceso a la información emitida. El UserProvider se creó al igual que el CatProvider extendiendo del ChangeNotifier:

⚠️ ¡Advertencia! No es necesario, que un ChangeNotifierProvider o MultiProvider estén siempre al comienzo de la App, solo se hace padre sobre los widgets que desean acceder a la información.

Sin embargo, lo más normal es que deseemos compartir info a lo largo de la aplicación y por eso en el ejemplo lo pusimos como el widget padre de toda la App.

Consumiendo los datos del Provider

Ya que tienes listo los Providers solo resta decidir cómo utilizarlos desde nuestros widgets. Tenemos dos opciones, analicemos cada una de ellas:

Consumer

Consumer es un widget que escucha un Provider y delega su información al constructor. De esta forma puedes dibujar de nuevo la porción del árbol contenida por el Consumer cuando cambie el Provider que escucha de forma automática. Esto optimiza la experiencia, pues no reconstruyes toda la vista sino, únicamente los elementos que han sufrido cambios. La forma de utilizarlo es la siguiente:

Como ves el builder, exige la entrada de tres parámetros, dos obligatorios y uno opcional a saber : BuildContext context, T value, Widget? child. De forma que puedes utilizar el contexto y el Provider<T> para construir un nuevo widget en el árbol, con las características ya descritas.

Por lo tanto, es buena idea usar el Consumer cuando deseas acceder a la información, ser reactivo ante esta (mostrar y actualizar ante cambios) y no tener necesidad de cambiar la información proveniente del Provider.

Provider.of

El Provider.of es la base del Consumer. Literalmente es la subscripción a un Proveedor y nos permite acceder a la información y modificarla en caso de ser necesario. También, puedes utilizarlo a lo largo del árbol de widgets. La forma en que puedes implementarlo es la siguiente:

Como ves en este escenario, en primera instancia se define el Provider.of (línea 11 y 12) y luego a lo largo del árbol de widgets se puede utilizar para la lectura (línea 17) o escritura (línea 19 y 20) de los datos entregados por el Provider.

Conclusión

La librería Provider no es una herramienta compleja de implementar. Es tan poderosa que le dan muchos usos en la comunidad. Por eso, podrás escuchar que algunos te digan “Provider es un gestor de estados”. Con la información de este artículo, ya les podrás decir que no. No obstante, es un herramienta tan versátil que puede ser usada para este fin (si te gustaría un artículo de manejo de estados con Provider déjame saberlo en la caja de comentarios 👇🏻).

Ahora que tienes en tus manos el conocimiento, comienza a implementar soluciones con Provider. Si el artículo te gustó por favor déjame unos (20+nivelGratitud)*👏 aplausos. Por cierto, te dejo el enlace a un repositorio donde implementamos todos estos ejemplos.

Un abrazo grande y un feliz día.