14 Semana_14_Widgets_Flutter_vi

Vista previa del material en texto

Semana 14: Widgets en Flutter (vi)
Facultad de Ingeniería de Sistema e Informática
LENGUAJE DE PROGRAMACIÓN V
Ing. Angel Marthans Ruiz, Mg.
Objetivos: 
Al finalizar, el alumno logrará:
 Conocer los conceptos de los widgets interactivos.
 Conocer los conceptos de los widgets basados en gestos.
 Conocer los conceptos de los widgets para fecha y hora.
 Conocer los conceptos de los widgets para elementos de 
formulario.
2
Temas:
 Widgets Interactivos
 Widgets basados en gestos
 Widgets para Fecha y Hora
 Widgets para elementos de formulario
3
Widgets Interactivos
4
Responde a eventos touch y envia a los usuarios diferentes vistas.
Widgets basados en gestos
5
Los widgets basados en gestos detectan diferentes comportamientos táctiles del usuario. 
Envuelve widgets de gestos alrededor de otros widgets que necesitan un comportamiento táctil.
Los widgets de gestos intentan reconocer qué tipo de gesto realizó el usuario, por ejemplo, si 
tocó, tocó dos veces, presionó prolongadamente o se movió.
Los dos widgets de gestos más comunes son:
1. GestureDetector: proporciona otros controles, como arrastrar.
2. InkWell: proporciona retroalimentación de ondas animadas. Por ejemplo, cuando el usuario 
toca un elemento de la interfaz de usuario, lo usa para mostrar una animación.
Widgets basados en gestos
6
Comportamiento de gestos
Otra cosa a tener en cuenta con los widgets de gestos es HitTestBehavior, que controla cómo 
se comporta el gesto durante una prueba de posicionamiento.
Hay tres tipos de comportamiento:
• deferToChild: pasa el evento táctil al árbol de widgets. Este es el comportamiento 
predeterminado de GestureDetector.
• opaque: evita que los widgets en segundo plano reciban eventos táctiles.
• translucent: permite que los widgets en segundo plano reciban eventos táctiles.
Estos widgets de gestos admiten tocar, tocar dos veces, presionar prolongadamente, 
desplazarse y muchos otros gestos.
Widgets basados en gestos
7
Widget InkWell : Un área rectangular que responde al tacto. El widget InkWell debe tener un 
widget Material como padre. El widget Material es donde se pintan realmente las reacciones de 
tinta. Esto coincide con la premisa de Material Design en la que el Material es lo que realmente 
reacciona a los toques al esparcir tinta.
Widget Dismissible : Un widget que se puede descartar arrastrando en la dirección indicada. 
Arrastrar o arrojar este widget en DismissDirection hace que el hijo se deslice fuera de la vista.
Widget GestureDetector : Un widget que detecta gestos. Intenta reconocer los gestos que 
corresponden a sus Callbacks no nulas. Si este widget tiene un hijo, se remite al tamaño del hijo. 
Si no tiene un hijo, crece para adaptarse al padre.
Widgets basados en fecha y hora
8
Selector de fecha y hora
Un selector de fecha y hora, significa que podemos elegir la fecha y la hora en inglés, español y 
cualquier otro idioma que desee, y también podemos personalizar nuestro propio contenido del 
selector. DatePicker and Timer Picker es un widget de material que le permite al usuario 
seleccionar una fecha y hora. 
Dado que no hay un widget disponible para crear un selector de fecha y un selector de hora, 
usaremos la función showDatePicker() y la función showTimePicker(). Mostrará un selector de 
fecha y un selector de hora de Material Design en un cuadro de diálogo llamando a la función 
incorporada de flutter.
Widgets basados en fecha y hora
9
Constructor para Date Picker
El selector de fechas requiere las propiedades initialDate, firstDate y lastDate.
 initialDate: Es la fecha que queremos mostrar cuando se muestra el selector de fechas por 
primera vez. Debe estar entre firstDate y lastDate. Para la fecha inicial, también podemos 
mostrar la fecha actual. La fecha actual representa la fecha de hoy y se resaltará en la 
cuadrícula del día. Si no proporcionamos ningún valor, utilizará la fecha de DateTime.now().
 firstDate: Es la fecha mínima posible que el usuario puede seleccionar.
 lastDate: Es la fecha máxima posible que el usuario puede seleccionar.
Widgets basados en fecha y hora
1 0
Constructor para Time Picker
El selector de tiempo requiera propiedades initialTime sin las cuales no podemos usar el selector 
de fecha. initialTime tiene un tipo de TimeOfDay que describe la hora al principio cuando el 
usuario abre el cuadro de diálogo. Para initialTime, también podemos mostrar la hora actual. La 
hora actual representa la hora de hoy y se resaltará en la Cuadrícula de tiempo. Si no 
proporcionamos ningún valor, utilizará la fecha de TimeOfDay.now().
Widgets para elementos de formulario
1 1
Widget Form: Un contenedor opcional para agrupar varios widgets de campos de formulario 
(por ejemplo, widgets de TextField).
Cada campo de formulario individual debe incluirse en un widget de FormField, con el widget 
de formulario como padre común de todos ellos. Llame a métodos en FormState para guardar, 
restablecer o validar cada FormField que es un descendiente de este Formulario.
Widgets para elementos de formulario
1 2
Este ejemplo muestra un formulario con un TextFormField para ingresar una dirección de correo 
electrónico y un ElevatedButton para enviar el formulario. Aquí se utiliza una clave global para 
identificar el formulario y validar la entrada.
Widgets para elementos de formulario
1 3
Widget TextField: Un campo de texto de Material Design. Un campo de texto le permite al 
usuario ingresar texto, ya sea con un teclado de hardware o con un teclado en pantalla.
El campo de texto llama a la devolución de llamada onChanged cada vez que el usuario cambia 
el texto en el campo. Si el usuario indica que ha terminado de escribir en el campo (por ejemplo, 
presionando un botón en el teclado virtual), el campo de texto llama a la devolución de llamada 
onSubmitted.
Para controlar el texto que se muestra en el campo de texto, utilice el controlador. Por ejemplo, 
para establecer el valor inicial del campo de texto, use un controlador que ya contenga algo de 
texto. El controlador también puede controlar la región de selección y composición (y observar 
cambios en el texto, la selección y la región de composición).
Widgets para elementos de formulario
1 4
Este ejemplo muestra cómo crear un TextField que ocultará la entrada. InputDecoration rodea el 
campo en un borde usando OutlineInputBorder y agrega una etiqueta.
Referencias:
 https://api.flutter.dev/flutter/material/InkResponse-class.html
 https://api.flutter.dev/flutter/widgets/Dismissible-class.html
 https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
 https://flutterguide.com/date-and-time-picker-in-flutter
 https://api.flutter.dev/flutter/widgets/Form-class.html
 https://api.flutter.dev/flutter/material/TextField-class.html
1 5
https://api.flutter.dev/flutter/material/InkResponse-class.html
https://api.flutter.dev/flutter/widgets/Dismissible-class.html
https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
https://flutterguide.com/date-and-time-picker-in-flutter
https://api.flutter.dev/flutter/widgets/Form-class.html
https://api.flutter.dev/flutter/material/TextField-class.html
La manera de empezar es dejar de 
hablar y comenzar a actuar.
Walt Disney
1 6
	�����Semana 14: Widgets en Flutter (vi)
	Objetivos: �Al finalizar, el alumno logrará:
	Temas:
	Widgets Interactivos
	Widgets basados en gestos
	Widgets basados en gestos
	Widgets basados en gestos
	Widgets basados en fecha y hora
	Widgets basados en fecha y hora
	Widgets basados en fecha y hora
	Widgets para elementos de formulario
	Widgets para elementos de formulario
	Widgets para elementos de formulario
	Widgets para elementos de formulario
	Referencias:
	La manera de empezar es dejar de hablar y comenzar a actuar.