Flutter StatefulWidget. Usos - Historial de revisiones

Angelfg: /* Ejercicios propuestos providers */

2025-11-10T18:10:34Z

Ejercicios propuestos providers

Angelfg: /* Exercicios propostos providers */

2025-11-09T17:19:15Z

Exercicios propostos providers

Angelfg: /* Exercicios propostos providers */

2025-11-09T17:18:42Z

Exercicios propostos providers

Angelfg: /* Providers: Empleando ChangeNotifier-ChangeNotifierProvider */

2025-11-09T17:18:14Z

Providers: Empleando ChangeNotifier-ChangeNotifierProvider

Angelfg: /* Providers: Empleando ChangeNotifier-ChangeNotifierProvider */

2023-11-17T09:05:17Z

Providers: Empleando ChangeNotifier-ChangeNotifierProvider

Angelfg: /* Providers: Empleando ChangeNotifier-ChangeNotifierProvider */

2023-11-17T09:04:58Z

Providers: Empleando ChangeNotifier-ChangeNotifierProvider

Angelfg: /* Providers: Empleando ChangeNotifier-ChangeNotifierProvider */

2023-11-10T09:53:51Z

Providers: Empleando ChangeNotifier-ChangeNotifierProvider

Angelfg: /* Providers: Empleando ChangeNotifier-ChangeNotifierProvider */

2023-11-06T17:26:18Z

Providers: Empleando ChangeNotifier-ChangeNotifierProvider

Angelfg: /* Providers:Empleando ChangeNotifier-ChangeNotifierProvider */

2023-10-16T14:02:09Z

Providers:Empleando ChangeNotifier-ChangeNotifierProvider

Angelfg: /* Entendiendo las diferentes formas de emplear el ChangeNotifier */

2022-08-15T11:09:19Z

Entendiendo las diferentes formas de emplear el ChangeNotifier

@@ Línea 1484: / Línea 1484: @@
 <br />
-=====Ejercicios propuestos providers=====
+======Ejercicios propuestos providers======
 * '''Ejercicio 1:''' Contador con visibilidad selectiva

@@ Línea 1484: / Línea 1484: @@
 <br />
-=====Exercicios propostos providers=====
+=====Ejercicios propuestos providers=====
 * '''Ejercicio 1:''' Contador con visibilidad selectiva

@@ Línea 1484: / Línea 1484: @@
 <br />
-====Exercicios propostos providers====
+=====Exercicios propostos providers=====
 * '''Ejercicio 1:''' Contador con visibilidad selectiva

← Revisión anterior		Revisión del 17:18 9 nov 2025
Línea 1483:		Línea 1483:


		+	<br />
		+	====Exercicios propostos providers====

		+	* '''Ejercicio 1:''' Contador con visibilidad selectiva
		+	:Objetivo: Practicar Consumer y Provider.of.
		+	:Enunciado:
		+	:: Hay un contador (CounterProvider) que se incrementa con un botón.
		+	::Dos widgets muestran información del contador:
		+	::Uno debe actualizarse cuando cambia el contador.
		+	::Otro solo necesita leer el valor para mostrarlo una vez o hacer algo en consola al presionar un botón.
		+
		+	:Crea un CounterProvider con int count y un método increment().
		+	:Hacer un widget que muestre el contador y se actualice automáticamente cuando cambie.
		+	:Hacer un widget con un botón que lea el contador y lo imprima en consola cuando se presione, sin reconstruirse cuando cambie el contador.
		+	:Agregar un botón de incrementar el contador.
		+
		+
		+	* '''Ejercicio 2:''' Tema oscuro
		+	:Objetivo: Practicar Provider.of con listen: true/false y Stateful/Stateless.
		+	:Enunciado:
		+	::Hay un ThemeProvider que contiene un booleano isDark.
		+	::La pantalla tiene:
		+	::* Un fondo que cambia según el tema.
		+	::* Un switch que permite cambiar entre claro y oscuro.
		+
		+	: Crea un ThemeProvider con bool isDark y un método para alternar.
		+	:* El fondo de la pantalla debe usar el tema pero no necesita reconstruirse cada vez que cambia.
		+	:* El switch debe reflejar el estado actual del tema y permitir cambiarlo.
		+
		+
		+	* '''Ejercicio 3:''' Lista de tareas
		+	:Objetivo: Combinar Consumer, Provider.of y Stateful/Stateless.
		+	:Enunciado:
		+	::Hay un TaskProvider con una lista de tareas (solo nombres y un booleano completed).
		+	::La pantalla tiene:
		+	::* Una lista que muestra tareas filtradas por completadas o no.
		+	::* Un botón que imprime el número total de tareas.
		+	::* Botones para alternar el filtro de tareas (completadas o pendientes).
		+
		+	: Crea un TaskProvider con lista de tareas y método para alternar completadas.
		+	:* La lista de tareas debe actualizarse automáticamente cuando cambien las tareas o el filtro.
		+	:* El botón que imprime el total de tareas no debe reconstruirse al cambiar nada.
		+	:* El filtro puede tener un estado local (por ejemplo, cuál botón está seleccionado).

	<br />		<br />

← Revisión anterior		Revisión del 09:05 17 nov 2023
Línea 957:		Línea 957:

	* El procedimiento es muy sencillo.		* El procedimiento es muy sencillo.
−	:* '''Paso 1)''' Añadimos el paquete provider desde ~~https://~~pub.dev: https://pub.dev/packages/provider	+	:* '''Paso 1)''' Añadimos el paquete provider desde pub.dev: https://pub.dev/packages/provider

@@ Línea 957: / Línea 957: @@
 * El procedimiento es muy sencillo.
-:* '''Paso 1)''' Primero creamos una clase que derive de ChangeNotifier o que hago uso de la misma en [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_DART_Clases#Mixins forma de mixins como ya vimos anteriormente].
+:* '''Paso 1)''' Añadimos el paquete provider desde https://pub.dev: https://pub.dev/packages/provider
 :: Dentro de dicha clase declaramos las variables que van a conformar nuestra 'fuente de datos'. Fijaros que podemos emplear funciones Future, que vayan a buscar información a internet, por ejemplo...
 :: Declaramos los métodos que van a modificar los datos guardados.
@@ Línea 963: / Línea 966: @@
-:* '''Paso 2)''' Ahora debemos 'envolver' el Widget que va a englobar a todos los demás Widgets que van a hacer uso del provider, con un [https://pub.dev/documentation/provider/latest/provider/ChangeNotifierProvider-class.html ChangeNotifierProvider]. De esta forma, añadiremos al Context una referencia al provider creando anteriormente y todos los Widget que 'cuelguen' del mismo van a poder tener una referencia al provider a través de la clase Context.
+:* '''Paso 3)''' Ahora debemos 'envolver' el Widget que va a englobar a todos los demás Widgets que van a hacer uso del provider, con un [https://pub.dev/documentation/provider/latest/provider/ChangeNotifierProvider-class.html ChangeNotifierProvider]. De esta forma, añadiremos al Context una referencia al provider creando anteriormente y todos los Widget que 'cuelguen' del mismo van a poder tener una referencia al provider a través de la clase Context.
-:* '''Paso 3''' Desde cualquier Widget podremos acceder a los datos/métodos de la clase anterior de la forma: '''ProviderPrueba provider = Provider.of<ProviderPrueba>(context,listen: true);''' siendo ProviderPrueba el nombre que le hemos dado a la clase anterior. El atributo del constructor '''listen''' indica si el Widget tiene que redibujarse si se produce algún cambio en los datos. Siempre que podamos, mejor tenerlo a false.
+:* '''Paso 4)''' Desde cualquier Widget podremos acceder a los datos/métodos de la clase anterior de la forma: '''ProviderPrueba provider = Provider.of<ProviderPrueba>(context,listen: true);''' siendo ProviderPrueba el nombre que le hemos dado a la clase anterior. El atributo del constructor '''listen''' indica si el Widget tiene que redibujarse si se produce algún cambio en los datos. Siempre que podamos, mejor tenerlo a false.
 : Ahora, a través del objeto 'provider' podremos acceder a los datos y métodos.
 : Como habéis observado, necesitamos acceder al context para poder hacerlo, por lo que normalmente la referencia se coje desde el método build del Widget...

@@ Línea 995: / Línea 995: @@
 :<syntaxhighlight lang="java" enclose="div" highlight="3,14,20">
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 class ProviderPrueba with ChangeNotifier{

@@ Línea 980: / Línea 980: @@
 * Veamos un ejemplo, en el que tenemos dos listas que cargan los datos de un List y una etiqueta que muestra cuantos datos tiene la lista.
 : Las listas son StatefulWidget y la etiqueta es un Stateless.
 [[Imagen:Flutter_dart_provider_1_stateful.JPG | 300px | center]]
@@ Línea 1019: / Línea 1023: @@
 '''Clase: ProbandoProvider'''
-:<syntaxhighlight lang="java" enclose="div" highlight="13-15,38,45,65,69">
+:<syntaxhighlight lang="java" enclose="div" highlight="14-15,22-24,39,44-47,66,70">
 import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 class ProbandoProvider extends StatelessWidget {
-   ProbandoProvider({Key? key}) : super(key: key);
+  ProbandoProvider({Key? key}) : super(key: key);
@@ Línea 1034: / Línea 1039: @@
      return  ChangeNotifierProvider(
          create: (BuildContext context)  => ProviderPrueba(),
-    child: Scaffold(
+        child: Scaffold(
-        appBar: AppBar(
+            appBar: AppBar(
-          title: Text('Provider'),
+              title: Text('Provider'),
-        ),
+            ),
-        body: Column(
+            body: Column(
-          children: [
+              children: [
-            Expanded(child: _CreandoLista()),
+                Expanded(child: _CreandoLista(escuchar: true,)),
-            Expanded(child: _CrearTexto(),),
+                Expanded(child: _CrearTexto(),),
-            Expanded(child: _CreandoLista()),
+                Expanded(child: _CreandoLista(escuchar: false,)),
-          ],
+              ],
+         )
      );
+   }
@@ Línea 1057: / Línea 1062: @@
    @override
    Widget build(BuildContext context) {
-     ProviderPrueba provider = Provider.of<ProviderPrueba>(context,listen: false); // No se actualiza si no es true
+     ProviderPrueba provider = Provider.of<ProviderPrueba>(context,listen: true); // No se actualiza si no es true
      print('Se dibuja');
      final aleat = Random();
@@ Línea 1073: / Línea 1078: @@
 class _CreandoLista extends StatefulWidget {
+  bool escuchar;
-  const _CreandoLista({Key? key}) : super(key: key);
+   _CreandoLista({Key? key,required this.escuchar}) : super(key: key);
    @override
@@ Línea 1084: / Línea 1089: @@
    @override
    Widget build(BuildContext context) {
-     ProviderPrueba provider = Provider.of<ProviderPrueba>(context,listen: true);  // Con true, indicamos que si se produce un notifyListeners() debe ser redibujado
+     ProviderPrueba provider = Provider.of<ProviderPrueba>(context,listen: widget.escuchar);  // Con true, indicamos que si se produce un notifyListeners() debe ser redibujado
      return ListView(
-          children: provider.datos.map((e) => ListTile(
+        children: provider.datos.map((e) => ListTile(
            title: Text('Dato:$e'),
            onTap: () { provider.remove(e); },
+         )
-      ).toList()
+        ).toList()
      );
+   }
+}
 </syntaxhighlight>

@@ Línea 949: / Línea 949: @@
 <br />
-=====Providers:Empleando ChangeNotifier-ChangeNotifierProvider=====
+=====Providers: Empleando ChangeNotifier-ChangeNotifierProvider=====
 * El empleo de providers nos facilita mucho la vida para:

@@ Línea 1185: / Línea 1185: @@
 * La pregunta es ¿ cuando usar una u otra forma ?
-: Lo que tenemos que tener claro es que el 'efecto' que provaca el notifyListener() sobre los widget es 'redibujarlos' y por tanto llamar u>sólamente al método build()</u>, tanto de un StatelessWidget como de un StatefulWidget.
+: Lo que tenemos que tener claro es que el 'efecto' que provaca el notifyListener() sobre los widget es 'redibujarlos' y por tanto llamar <u>sólamente al método build()</u>, tanto de un StatelessWidget como de un StatefulWidget.
 : La diferencia es que si lo hacemos sobre un StatelessWidget, al no guardar el estado, se va a redibujar sin cambios.
 : Si estamos trabajando con un StatefulWidget, el estado se mantiene, como ya [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_StatefulWidget._Conceptos#Cuando_crear_un_StatelessWidget_o_un_StatefulWidget vimos en un punto anterior de esta Wiki].
@@ Línea 1198: / Línea 1198: @@
 <br />
 ======1ª REGLA======