Flutter StatefulWidget. Conceptos - Historial de revisiones

Angelfg: /* Ejercicios propuestos */

2025-10-27T15:40:39Z

Ejercicios propuestos

Angelfg: /* Ejemplo 3 */

2024-10-29T15:11:14Z

Ejemplo 3

Angelfg: /* Accediendo a las propiedes del StatefulWidget desde el State */

2024-10-26T08:29:59Z

Accediendo a las propiedes del StatefulWidget desde el State

Angelfg en 08:25 26 oct 2024

2024-10-26T08:25:05Z

Angelfg: /* Cuando crear un StatelessWidget o un StatefulWidget */

2021-11-27T11:43:27Z

Cuando crear un StatelessWidget o un StatefulWidget

Angelfg: /* Ejercicios propuestos */

2021-11-27T11:42:40Z

Ejercicios propuestos

Angelfg: /* Ejemplo 4 */

2021-11-05T08:23:45Z

Ejemplo 4

Angelfg: /* Ejemplo 4 */

2021-11-05T08:23:30Z

Ejemplo 4

Angelfg: /* Ejemplos Stateless-Stateful combinados */

2021-11-04T19:51:03Z

Ejemplos Stateless-Stateful combinados

Angelfg: /* Ejemplo 4 */

2021-11-04T19:36:02Z

Ejemplo 4

@@ Línea 1041: / Línea 1041: @@
 ==Ejercicios propuestos==
-* Crea una variable global que guarde en un lista los valores de los tres contenedores.
+* '''Ejercicio 1''':
 : Haz que cada contenedor esté identificado por un id (0,1,2) que se corresponda con la posición de la lista a la que tendrá que acceder a modificar su valor.
 : En base al id (0,1,2) haz que al presionar el contenedor, aumente el valor del elemento de la lista y que se visualice en el texto que hay en el interior.
@@ Línea 1049: / Línea 1050: @@
 <br />
-'''Solución ejercicio propuesto:'''
+* '''Ejercicio 2''':
 :<syntaxhighlight lang="java" enclose="div" highlight="" >
 import 'package:flutter/material.dart';

@@ Línea 520: / Línea 520: @@
 : La propiedad que queremos cambiar es color del Widget Ink.
 : Por otro lado, al pulsar dos veces necesitamos eliminar el elemento de la lista y redibujar la lista.
-: Vamos a tener que 'redibujar' el Widget tanto cuando pulsemos un elemento de la lista, como cuando
+: Vamos a tener que 'redibujar' el Widget tanto cuando pulsemos un elemento de la lista, como cuando lo elimamos que tendremos que redibujar la lista completa.
@@ Línea 583: / Línea 583: @@
 <br />
 ===Ejemplos Stateless-Stateful combinados===

← Revisión anterior		Revisión del 08:29 26 oct 2024
Línea 147:		Línea 147:

	* <u>'''Nota:'''</u> Lo 'normal' es que las constantes estén definidas en el Stateful (partes invariantes) y las variables en el State asociado.		* <u>'''Nota:'''</u> Lo 'normal' es que las constantes estén definidas en el Stateful (partes invariantes) y las variables en el State asociado.
		+
		+
		+
		+	<br />
		+	* Ahora ¿ qué pasa cuando queremos modificar el valor de una 'constante' definida en el Stateful desde State ?
		+	: Una de las formas de solucionarlo es definir la variable en State e indicarle que la vamos a inicializar posteriormente concretamente en el método initState.
		+	: El método initState es un método de la clase State en Flutter que se llama una sola vez, cuando se crea la instancia de State. Es el primer método que se ejecuta en el ciclo de vida de un widget con estado (StatefulWidget) después de que el State se adjunta al árbol de widgets. Aquí es donde generalmente se inicializan variables y se configuran operaciones que deben ocurrir solo
		+	una vez durante la vida útil del widget.
		+
		+	* Veamos un ejemplo:
		+	:<syntaxhighlight lang="java" enclose="div" highlight="2,11,13-18" >
		+	class MiTextoConEstado extends StatefulWidget {
		+	final double tamTexto;
		+	const MiTextoConEstado({ super.key , required this.tamTexto});
		+
		+	@override
		+	State<MiTextoConEstado> createState() => _MiTextoConEstadoState();
		+	}
		+
		+	class _MiTextoConEstadoState extends State<MiTextoConEstado> {
		+
		+	late double _tamTexto;
		+
		+	@override
		+	void initState() {
		+	// TODO: implement initState
		+	super.initState();
		+	_tamTexto = widget.tamTexto;
		+	}
		+
		+	@override
		+	Widget build(BuildContext context){
		+	return GestureDetector(
		+	onTap: (){
		+	setState(() {
		+	_tamTexto++;
		+	});
		+	},
		+	child: Text('TEXTO QUE CRECE', style: TextStyle(fontSize: _tamTexto),)
		+
		+	);
		+	}
		+	}
		+
		+	</syntaxhighlight>
		+
		+
		+
		+

	<br />		<br />

@@ Línea 683: / Línea 683: @@
 class WidgetListaState extends State<WidgetLista> {
-   int _colorVariable = -1;
+   late int _colorVariable;  // Con late indicamos que lo vamos a inicializar posteriormente, en el método initState
    String _elemSeleccionado='';
    @override
    Widget build(BuildContext context) {
      print('Dibuja la lista:${widget.listaElementosConstante}');

@@ Línea 932: / Línea 932: @@
 * A diferencia de la programación de aplicaciones de escritorio con otros IDE´s en los que en base a un evento. cambiamos las propiedades visuales del componente, en Flutter no se hace así...
-: Es decir, en la programación tradicional, si queremos cambiar el contenio de texto de una etiqueta, pondríamos algo parecido a esto:
+: Es decir, en la programación tradicional, si queremos cambiar el contenido de texto de una etiqueta, pondríamos algo parecido a esto:
 :<syntaxhighlight lang="java" enclose="div" highlight="" >
          final JTextField textField = new JTextField("TEXTO");

← Revisión anterior		Revisión del 11:42 27 nov 2021
Línea 909:		Línea 909:

	* '''<u>Nota:</u>''' Veremos [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_StatefulWidget._Usos más adelante en esta Wiki] como pasar datos entre los diferentes Stateful Widget´s.		* '''<u>Nota:</u>''' Veremos [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_StatefulWidget._Usos más adelante en esta Wiki] como pasar datos entre los diferentes Stateful Widget´s.
		+
		+
		+
		+	<br />
		+
		+	==Cuando crear un StatelessWidget o un StatefulWidget==
		+
		+	* Como norma general, siempre debes de crear un StatelessWidget y cuando al programar veas que es necesario guardar el estado, convertirlo a un StatefullWidget.
		+
		+	:<u>En Android Studio</u> (y en VSCode también) es inmediato convertilo a un StatefulWidget.
		+	<gallery caption="Convertir un StatelessWidget a un StatefulWidget" widths="350" heights="300px" perrow="2">
		+	Image:Flutter_dart_stateful_3.JPG \| Nos situamos en el StatelessWidget que queremos convertir y pulsamos el botón derecho del ratón, escogiendo la opción '''Show Context Actions'''.
		+	Image:Flutter_dart_stateful_4.JPG \| Pulsamos sobre la opción '''Convert to StatefulWidget'''.
		+	</gallery>
		+
		+
		+
		+	* Como pista para saber si necesitamos un Stateless o un Stateful, siempre que el Widget tenga algún camnbio 'visual' en base a eventos que se produzcan sobre la pantalla, será un firme candidato a ser un StatefulWidget.
		+
		+
		+
		+
		+	* A diferencia de la programación de aplicaciones de escritorio con otros IDE´s en los que en base a un evento. cambiamos las propiedades visuales del componente, en Flutter no se hace así...
		+	: Es decir, en la programación tradicional, si queremos cambiar el contenio de texto de una etiqueta, pondríamos algo parecido a esto:
		+	:<syntaxhighlight lang="java" enclose="div" highlight="" >
		+	final JTextField textField = new JTextField("TEXTO");
		+	JButton button = new JButton("Click!");
		+	button.addActionListener(new ActionListener() {
		+	@Override
		+	public void actionPerformed(ActionEvent e) {
		+	textField.setText("NUEVO TEXTO");
		+	}
		+	});
		+	</syntaxhighlight>
		+
		+	: Como vemos, capturamos el evento de Click sobre el botón, y en el método actionPerformed cambiamos la propiedad text del objeto JTextField.
		+
		+
		+
		+	* En la programación con Flutter '''<u>ESTO NO ES POSIBLE</u>'''.
		+	: Debemos de cambiar la mentalidad y pensar que los cambios en las propiedades de un Widget, se establecen mediante variables cuyos valores cambian antes de redibujarse...
		+
		+	: Por tanto, para redibujarse será necesario que sea un StatefulWidget (o que lo sea algún Widget que envuelva al StatelessWidget) y redibujarse se redibujará con los valores de las variables cambiadas previamente.
		+
		+	: Veamos el mismo ejemplo desde la perspectiva de Flutter:
		+	:<syntaxhighlight lang="java" enclose="div" highlight="2,8-10,12" >
		+	class _CambiandoTextoState extends State<CambiandoTexto> {
		+	String _texto = 'TEXTO INICIAL';
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	return GestureDetector(
		+	onTap: () {
		+	setState(() {
		+	_texto = 'TEXTO CAMBIADO';
		+	});
		+	},
		+	child: Text('$_texto')
		+	);
		+	}
		+	}
		+	</syntaxhighlight>
		+
		+
		+	: Vemos que en la línea 12, el texto se dibuja con el contendo de una variable definida en la clase State.
		+	: Cuando pulsamos sobre el texto, llamamos al método setState. Dentro de la función, cambiamos el valor de la variable que utilizar el Widget. La llamada a setState va a provocar que el widget se redibuje ('''<u>sólo</u> llama al método build'''). Como hemos cambiado el valor de la variable _texto, al redibujarse, cambia el texto...
		+
		+
		+

@@ Línea 565: / Línea 565: @@
 : La lista debe estar definida en un StatefulWidget y el Scaffold en un StatelessWidget.
-[[Imagen:Flutter_dart_exemplo_4_stateful.JPG|250px|center]]
+[[Imagen:Flutter_dart_exemplo_3_stateful.JPG|250px|center]]
 :<syntaxhighlight lang="java" enclose="div" highlight="3,5,25,27,34,41,58" >

← Revisión anterior		Revisión del 19:51 4 nov 2021
Línea 722:		Línea 722:

	}		}
		+
		+	</syntaxhighlight>
		+
		+
		+
		+	<br />
		+	====Ejemplo 5====
		+
		+	'''CASO <u>StatefulWidget -> StatelessWidget</u>''': Un StatelessWidget dentro de un StatefulWiget en la jerarquía.
		+
		+	* Entre los casos de funcionamiento que nos podemos encontrar tenemos:
		+	:* Visualizar un dato que vengal del StatefulWidget => No tiene problema. Se le pasaría por el constructor.
		+	:* Que el StatelessWidget quiera provocar que se redibuje el StatefulWidget => No lo podría hacer ya que al no ser un StatefulWidget no puede llamar al método setState.
		+
		+	* La solución que se propone para estos casos es la de enviar una función desde el StatefulWidget al StatelessWidget. El StatelessWidget llamará a la función que se ejecutará en el StatefulWidget y por lo tanto ya puede llamar al método setState.
		+
		+
		+	* Veamos el Ejemplo1 modificado para este caso.
		+	: El botón es un StatelessWidget y el contenedor está dentro del StatefulWidget.
		+	: Queremos que al pulsar el botón se cambie el tamaño del contenedor.
		+
		+
		+	[[Imagen:Flutter_dart_exemplo_1_stateful.JPG\|250px\|center]]
		+
		+
		+	:<syntaxhighlight lang="java" enclose="div" highlight="14-18, 36, 45,46,54" >
		+	import 'package:flutter/material.dart';
		+
		+
		+	class Aprender5Page extends StatefulWidget {
		+	const Aprender5Page({Key? key}) : super(key: key);
		+
		+	@override
		+	_Aprender5PageState createState() => _Aprender5PageState();
		+	}
		+
		+	class _Aprender5PageState extends State<Aprender5Page> {
		+	double _ancho = 50;
		+
		+	void aumentarAncho(int valor){
		+	setState(() {
		+	_ancho+=valor;
		+	});
		+	}
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: Text('Aprender1 Statefulwidget'),
		+	),
		+	body: Center(
		+	child: Column(
		+	mainAxisAlignment: MainAxisAlignment.center,
		+	children: [
		+	Container(
		+	padding: EdgeInsets.all(10),
		+	width: _ancho,
		+	height: 50,
		+	color: Colors.indigo,
		+	),
		+	TextoStateless(actualizarContenedor: aumentarAncho,)
		+	],
		+	),
		+	)
		+	);
		+	}
		+	}
		+
		+	class TextoStateless extends StatelessWidget {
		+	Function actualizarContenedor;
		+	TextoStateless({Key? key, required this.actualizarContenedor}) : super(key: key);
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	return TextButton(
		+	child: Text('PRESIONAME'),
		+	style: TextButton.styleFrom(backgroundColor: Colors.black),
		+	onPressed: () {
		+	actualizarContenedor(20);
		+	},
		+	);
		+	}
		+	}
		+

	</syntaxhighlight>		</syntaxhighlight>

← Revisión anterior		Revisión del 19:36 4 nov 2021
Línea 639:		Línea 639:

	<br />		<br />
		+	* Vamos a hacer una modificación al ejemplo anterior, y vamos a pasar desde el StatefulWidget, aparte de la lista, un número que será el color inicial de fondo de los elementos de la lista. Al pulsar sobre un elemento de la lista, el valor del color se incrementará en 10 hasta llegar a 255 y volverá a cero.
		+
		+	: En este caso, al pasar el dato al StatefulWidget, el color se guarda en una constante, por lo que desde la clase State no hará caso a ninguna modificación que agamos sobre la misma, empleando la referencia widget.color.
		+	: Por lo tanto, debemos de definir una variable color en la clase State e igualarla a la que está en la clase Stateful asociada, pero sólo una vez !!!!, ya que lo hacemos en el método built y dicho método se llama cada vez que se ejecuta setState.
		+	: La otra forma sería enviarlo en el constructor de la clase State.
		+	: Este caso normalmente no se da y emplearemos un provider (lo veremos más adelante) para gestionar este caso.
		+
		+	:<syntaxhighlight lang="java" enclose="div" highlight="6,18,27,30,37,42,43,56,61" >
		+	import 'package:flutter/material.dart';
		+
		+	class Aprender4Page extends StatelessWidget {
		+	// Fijarse que al estar en un StatelessWidget, los datos deben ser guarados en una constante.
		+	final List<String> _listaElementos = ['Elemento1','Elemento2','Elemento3'];
		+	final int colorAPasar = 1;
		+
		+	Aprender4Page({Key? key}) : super(key: key);
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	print('Dibuja el Scaffold');
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: Text('Aprender3 Statefulwidget'),
		+	),
		+	body: Center(
		+	child: WidgetLista(listaElementosConstante: _listaElementos,colorConstante: colorAPasar,)
		+	)
		+	);
		+	}
		+	}
		+
		+	class WidgetLista extends StatefulWidget {
		+	// Un statefulwidget también es inmutable. Sólo admite variables en la clase State
		+	final List<String> listaElementosConstante; // A paser que la lista es final, se puede modificar.
		+	final int colorConstante;
		+
		+	const WidgetLista({Key? key, required this.listaElementosConstante,
		+	required this.colorConstante}) : super(key: key);
		+
		+	@override
		+	WidgetListaState createState() => WidgetListaState();
		+	}
		+
		+	class WidgetListaState extends State<WidgetLista> {
		+	int _colorVariable = -1;
		+	String _elemSeleccionado='';
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	if (_colorVariable==-1)
		+	_colorVariable = widget.colorConstante;
		+
		+	print('Dibuja la lista:${widget.listaElementosConstante}');
		+	print('Color:$_colorVariable');
		+
		+	return ListView(
		+	children: widget.listaElementosConstante.map((e) => _elementoLista(e)).toList(),
		+	);
		+	}
		+
		+
		+	Widget _elementoLista(String elemento){
		+	return Ink(
		+	color: _elemSeleccionado == elemento ? Colors.red : Color.fromARGB(255, _colorVariable, _colorVariable, _colorVariable),
		+	child: ListTile(
		+	title: Text('$elemento'),
		+	onTap: () {
		+	setState(() {
		+	_colorVariable = _colorVariable < 245 ? _colorVariable+10 : 0;
		+	_elemSeleccionado = elemento;
		+	});
		+	},
		+	onLongPress: (){
		+	setState(() {
		+	widget.listaElementosConstante.remove(elemento);
		+	_elemSeleccionado = '';
		+	});
		+	},
		+	),
		+	);
		+	}
		+
		+	}
		+
		+	</syntaxhighlight>
		+
		+
		+	<br />
		+
	===Ejemplo contador===		===Ejemplo contador===