Flutter StatefulWidget. Eventos - Historial de revisiones

Angelfg: /* InkWell */

2024-11-13T07:56:49Z

InkWell

Angelfg: /* GestureDetector */

2022-11-17T18:18:47Z

GestureDetector

Angelfg: /* Introducción */

2022-11-08T21:41:52Z

Introducción

Angelfg en 15:35 26 oct 2021

2021-10-26T15:35:16Z

Angelfg: /* Introducción */

2021-09-23T16:14:12Z

Introducción

Angelfg: /* InkWell */

2021-09-22T17:35:28Z

InkWell

Angelfg: /* InkWell */

2021-09-22T17:35:17Z

InkWell

Angelfg en 17:34 22 sep 2021

2021-09-22T17:34:21Z

Angelfg en 17:33 22 sep 2021

2021-09-22T17:33:40Z

Angelfg en 17:18 22 sep 2021

2021-09-22T17:18:36Z

@@ Línea 32: / Línea 32: @@
 * Más información en: https://api.flutter.dev/flutter/material/InkWell-class.html
-: <u>Nota:</u> Para emplear este Widget es necesario que exista un Material Widget en alguno de sus ancestros en la jerarquía de Widget.
+: <u>Nota:</u>
 * Podéis consultar que eventos se pueden gestionar con este Widget [https://api.flutter.dev/flutter/material/InkWell-class.html#instance-properties en las propiedades del mismo que comienzan con onPPPPPPP].

@@ Línea 129: / Línea 129: @@
 :* https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
 :* https://flutter.dev/docs/development/ui/advanced/gestures
 A diferencia del anterior Widget este:

@@ Línea 1: / Línea 1: @@
 ==Introducción==
-* Ya vimos en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_StatefulWidget._Formularios sección anterior de formularios] como gestionar los diferentes eventos que se puedan producir en los elementos gráficos que conforman un formulario.
+* Veremos en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_StatefulWidget._Formularios sección anterior de formularios] como gestionar los diferentes eventos que se puedan producir en los elementos gráficos que conforman un formulario (botones, listas,...)
 * Pero puede ser necesario que queramos gestionar algún evento sobre un Widget el cual no tenga asociado ninguna función de gestión de eventos sobre el mismo en su constructor.

@@ Línea 266: / Línea 266: @@
 <br />
-[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_4:_Flutter._StatefullWidget Enlace a la página principal de la UD4]
+[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_4:_Flutter._StatefulWidget Enlace a la página principal de la UD4]
 [https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER Enlace a la página principal del curso]

@@ Línea 5: / Línea 5: @@
 * Pero puede ser necesario que queramos gestionar algún evento sobre un Widget el cual no tenga asociado ninguna función de gestión de eventos sobre el mismo en su constructor.
 : Veremos en este punto, cómo podemos implementar estos eventos.
@@ Línea 16: / Línea 26: @@
 <br />
 ==InkWell==

@@ Línea 24: / Línea 24: @@
 * Podéis consultar que eventos se pueden gestionar con este Widget [https://api.flutter.dev/flutter/material/InkWell-class.html#instance-properties en las propiedades del mismo que comienzan con onPPPPPPP].
-: En el siguiente ejemplo vamos a ver las que normalmente vais necesitar emplear, con el click (onTap) o doble click (onDoubleTap), mantener presionado (onLongPress).
+: En el siguiente ejemplo vamos a ver las que normalmente vais necesitar emplear, como el click (onTap) o doble click (onDoubleTap), mantener presionado (onLongPress).
@@ Línea 110: / Línea 110: @@
 <br />
 ==GestureDetector==

← Revisión anterior		Revisión del 17:34 22 sep 2021
Línea 244:		Línea 244:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+
		+
		+
		+
		+	<br />
		+
		+	[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_4:_Flutter._StatefullWidget Enlace a la página principal de la UD4]
		+
		+	[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER Enlace a la página principal del curso]
		+
		+
		+
		+
		+	<br> -- [[Usuario:angelfg\|Ángel D. Fernández González]] -- (2021).

← Revisión anterior		Revisión del 17:33 22 sep 2021
Línea 112:		Línea 112:
	==GestureDetector==		==GestureDetector==

−	~~Sobre container =>~~ https://~~stackoverflow~~.~~com~~/~~questions~~/~~44317188~~/flutter-~~ontap-method-for-containers~~	+	* Más información en:
		+	:* https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
		+	:* https://flutter.dev/docs/development/ui/advanced/gestures
		+
		+	A diferencia del anterior Widget este:
		+	:* No necesita tener un Widget ancestor de tipo Material.
		+	:* No tiene el 'efecto visual' que tiene el InkWell cuando se produce el evento.
		+	:* Tiene una mayor cantidad de eventos que podemos controlar, como deslizar los dedos sobre la pantalla,...
		+
		+
		+	* Modificaremos el ejemplo anterior para añadir dos contenedores que van gestionar el evento Click y el arrastrar el dedo sobre la pantalla en sentido horizontal.
		+
		+	[[Imagen:Flutter_dart_eventos_2.JPG\|300px\|center]]
		+
		+
		+	:<syntaxhighlight lang="java" enclose="div" highlight="15,16,27,74-94" >
		+	import 'package:flutter/material.dart';
		+
		+	class EventosPage extends StatefulWidget {
		+	const EventosPage({Key? key}) : super(key: key);
		+
		+	@override
		+	_EventosPageState createState() => _EventosPageState();
		+	}
		+
		+	class _EventosPageState extends State<EventosPage> {
		+	String _textoClick='Evento CLICK';
		+	String _textoDoubleClick = 'EVENTO DOUBLE CLICK';
		+	String _textoOnLongClick = 'EVENTO LONG CLICK';
		+
		+	String _textoClickGesture = 'Evento CLICK GESTURE';
		+	String _textoDragGesture = 'Evento DRAG';
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: Text('Xestión de Eventos'),
		+	),
		+	body: ListView(
		+	children: [
		+	_eventosSobreInkWell(),
		+	_eventosSobreGestureDetector(),
		+	],
		+	)
		+	);
		+	}
		+
		+	Widget _eventosSobreInkWell(){
		+
		+	return Column(
		+
		+	children: [
		+	InkWell(
		+	child: _crearContainer(texto: '$_textoClick',color: Colors.blue, fondo: Colors.yellow),
		+	onTap: () {
		+	setState(() {
		+	_textoClick = 'PULSASTE CON CLICK';
		+	});
		+	},
		+	),
		+	InkWell(
		+	child: _crearContainer(texto: '$_textoDoubleClick',color: Colors.red, fondo: Colors.yellow),
		+	onDoubleTap: () {
		+	setState(() {
		+	_textoDoubleClick = 'PULSASTE DOUBLE CLICK';
		+	});
		+	},
		+	),
		+	InkWell(
		+	child: _crearContainer(texto: '$_textoOnLongClick',color: Colors.green, fondo: Colors.yellow),
		+	onLongPress: () {
		+	setState(() {
		+	_textoOnLongClick = 'PULSASTE LONG CLICK';
		+	});
		+	},
		+	),
		+	],
		+
		+	);
		+
		+	}
		+
		+
		+	Widget _eventosSobreGestureDetector(){
		+
		+	return Column(
		+
		+	children: [
		+	GestureDetector(
		+	child: _crearContainer(texto: '$_textoClickGesture',color: Colors.blue, fondo: Colors.yellow),
		+	onTap: () {
		+	setState(() {
		+	_textoClick = 'PULSASTE CON CLICK';
		+	});
		+	},
		+	),
		+	GestureDetector(
		+	child: _crearContainer(texto: '$_textoDragGesture',color: Colors.green, fondo: Colors.yellow),
		+	onHorizontalDragUpdate: (detail){
		+	setState(() {
		+	_textoDragGesture = detail.delta.toString();
		+	});
		+	},
		+	onLongPress: () {
		+	setState(() {
		+	_textoOnLongClick = 'PULSASTE LONG CLICK';
		+	});
		+	},
		+	),
		+	],
		+
		+	);
		+
		+	}
		+
		+	Widget _crearContainer({required String texto, required Color color, required Color fondo}) {
		+	return Container(
		+	margin: EdgeInsets.only(top:10),
		+	height: 70,
		+	width: 300,
		+	color: fondo,
		+	child: Text('$texto',textAlign: TextAlign.center,style: TextStyle(color: color,fontWeight: FontWeight.bold,fontSize: 30),),
		+	);
		+
		+	}
		+
		+
		+
		+	}
		+
		+	</syntaxhighlight>

← Revisión anterior		Revisión del 17:18 22 sep 2021
Línea 1:		Línea 1:
		+	==Introducción==
		+
		+	* Ya vimos en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_StatefulWidget._Formularios sección anterior de formularios] como gestionar los diferentes eventos que se puedan producir en los elementos gráficos que conforman un formulario.
		+
		+	* Pero puede ser necesario que queramos gestionar algún evento sobre un Widget el cual no tenga asociado ninguna función de gestión de eventos sobre el mismo en su constructor.
		+	: Veremos en este punto, cómo podemos implementar estos eventos.
		+
		+
		+
		+	* Creamos una nueva página en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget#Estructura_de_p.C3.A1ginas carpeta pages] de nombre '''eventos_page.dart'''
		+	: En todas las páginas haremos lo mismo:
		+	:* Importamos la librería de 'material' (recordar que existe un [https://github.com/marius-h/flutter_enhancement_suite/blob/main/SNIPPETS.md#flutter-widget-snippets snippet] que lo hace automático).
		+	:* Creamos una clase (EventosPage) que derive de '''StatefulWidget'''. Se creará (si lo hacéis con un Snippet) una clase asociada que deriva de State.
		+	:* Modificamos la clase State y en su métod build hacemos que devuelva un Scaffold con una Appbar (hacerlo con un Snippet)
		+
		+
		+	<br />
		+	==InkWell==
		+
		+	* Más información en: https://api.flutter.dev/flutter/material/InkWell-class.html
		+
		+	: <u>Nota:</u> Para emplear este Widget es necesario que exista un Material Widget en alguno de sus ancestros en la jerarquía de Widget.
		+
		+	* Podéis consultar que eventos se pueden gestionar con este Widget [https://api.flutter.dev/flutter/material/InkWell-class.html#instance-properties en las propiedades del mismo que comienzan con onPPPPPPP].
		+
		+	: En el siguiente ejemplo vamos a ver las que normalmente vais necesitar emplear, con el click (onTap) o doble click (onDoubleTap), mantener presionado (onLongPress).
		+
		+
		+	[[Imagen:Flutter_dart_eventos_1.JPG\|300px\|center]]
		+
		+
		+	:<syntaxhighlight lang="java" enclose="div" highlight="34,36,42,44,50,52" >
		+	import 'package:flutter/material.dart';
		+
		+	class EventosPage extends StatefulWidget {
		+	const EventosPage({Key? key}) : super(key: key);
		+
		+	@override
		+	_EventosPageState createState() => _EventosPageState();
		+	}
		+
		+	class _EventosPageState extends State<EventosPage> {
		+	String _textoClick='Evento CLICK';
		+	String _textoDoubleClick = 'EVENTO DOUBLE CLICK';
		+	String _textoOnLongClick = 'EVENTO LONG CLICK';
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: Text('Xestión de Eventos'),
		+	),
		+	body: ListView(
		+	children: [
		+	_eventosSobreInkWell()
		+	],
		+	)
		+	);
		+	}
		+
		+	Widget _eventosSobreInkWell(){
		+
		+	return Column(
		+
		+	children: [
		+	InkWell(
		+	child: _crearContainer(texto: '$_textoClick',color: Colors.blue, fondo: Colors.yellow),
		+	onTap: () {
		+	setState(() {
		+	_textoClick = 'PULSASTE CON CLICK';
		+	});
		+	},
		+	),
		+	InkWell(
		+	child: _crearContainer(texto: '$_textoDoubleClick',color: Colors.red, fondo: Colors.yellow),
		+	onDoubleTap: () {
		+	setState(() {
		+	_textoDoubleClick = 'PULSASTE DOUBLE CLICK';
		+	});
		+	},
		+	),
		+	InkWell(
		+	child: _crearContainer(texto: '$_textoOnLongClick',color: Colors.green, fondo: Colors.yellow),
		+	onLongPress: () {
		+	setState(() {
		+	_textoOnLongClick = 'PULSASTE LONG CLICK';
		+	});
		+	},
		+	),
		+	],
		+
		+	);
		+
		+	}
		+
		+	Widget _crearContainer({required String texto, required Color color, required Color fondo}) {
		+	return Container(
		+	margin: EdgeInsets.only(top:10),
		+	height: 70,
		+	width: 300,
		+	color: fondo,
		+	child: Text('$texto',textAlign: TextAlign.center,style: TextStyle(color: color,fontWeight: FontWeight.bold,fontSize: 30),),
		+	);
		+
		+	}
		+	}
		+
		+	</syntaxhighlight>
		+
		+
		+	<br />
		+	==GestureDetector==
		+
	Sobre container => https://stackoverflow.com/questions/44317188/flutter-ontap-method-for-containers		Sobre container => https://stackoverflow.com/questions/44317188/flutter-ontap-method-for-containers