Provider en Flutter: gestión de estado paso a paso

En la app, un formulario recoge una transacción y otros widgets, en otras ramas del árbol, tienen que mostrarla. Con setState habría que subir los datos hasta un widget común con callbacks, lo que se llama lifting state up, y luego bajarlos por los constructores de cada widget. En una app pequeña sirve, pero en una grande se vuelve difícil de mantener.

Ver la respuesta en el vídeo · 08:02:54

Soluciones como InheritedWidget, Provider o BLoC se basan en el mismo principio. El provider se coloca tan arriba en el árbol como haga falta para que todos los widgets que necesitan los datos puedan acceder a ellos. Thomas cuenta que él usa mucho BLoC y que Flutter recomienda Provider; lo importante es entender el principio.

• El provider guarda los datos y los ofrece a todo el árbol.
• Los listeners son los widgets que escuchan esos datos.
• Cuando algo cambia, el provider avisa solo a quien escucha.

Ver la respuesta en el vídeo · 08:07:16

En la práctica, Thomas crea la clase TransactionsProvider. Extiende ChangeNotifier, que le da el método notifyListeners para avisar de los cambios. Dentro guarda la lista de transacciones como privada y la expone sin permitir que se modifique desde fuera. Añade un método para agregar transacciones y calcula los totales de ingresos y gastos. También muestra cómo acortar algunos métodos con la sintaxis de flecha, que hace lo mismo sin llaves ni return.

Ver la respuesta en el vídeo · 08:21:04

Provider es una librería externa: se añade como dependencia del proyecto. Después se envuelve la app en un ChangeNotifierProvider con su propiedad create, en la parte más alta del árbol. Por último, la lista de movimientos lee las transacciones del provider y las pinta con ListView.builder, que construye un elemento por cada transacción. Para añadir dependencias más rápido, Thomas recomienda una extensión de Visual Studio Code.

Ver la respuesta en el vídeo · 08:34:14