Diferencia entre revisiones de «Flutter StatefulWidget. Formularios»

De MediaWiki
Ir a la navegación Ir a la búsqueda
(Página creada con « <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ági…»)
 
Línea 1: Línea 1:
 +
==Introducción==
  
 +
* Al manejar cajas de texto, voy a necesitar 'guardar' la información introducida en el formulario en variables, por lo que voy a necesitar hacer uso de StatefulWidget´s.
  
 +
* 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 '''formulario_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 (FormularioPage) 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)
 +
 +
:* Como vamos a añadir múltiples elementos de formulario, vamos a crear un ListView dentro del body del Scaffold, para tener scroll vertical...
 +
 +
 +
 +
<br />
 +
==TextField==
 +
 +
* Más información en: https://api.flutter.dev/flutter/material/TextField-class.html
 +
 +
* '''<u>Nota:</u>''' Indicar que este Widget es usado para recuperar información introducida por el usuario, pero en el caso de tener un formulario en el que vamos a recuperar información de múltiples elementos (y no sólo cajas de texto) es más conveniento hacer uso del [https://api.flutter.dev/flutter/material/TextFormField-class.html TextFormField] como veremos después. En este caso es posible realizar una validación de los campos del formulario antes de hacer uso de los datos.
 +
 +
 +
* Propiedades más importantes:
 +
:* [https://api.flutter.dev/flutter/material/TextField/autofocus.html autofocus]: Permite que al iniciarse la aplicación el foco esté sobre la caja de texto.
 +
:* [https://api.flutter.dev/flutter/material/TextField/textCapitalization.html textCapitalization]: Para indicar si las letras, palabras, frases son en mayúscula.
 +
:* [https://api.flutter.dev/flutter/material/TextField/maxLength.html maxLength]: Número máximo de caracteres.
 +
:* [https://api.flutter.dev/flutter/material/TextField/keyboardType.html keyboardType]: Establece el tipo de teclado en base al tipo de información que se va a introducir (por ejemplo, email, teléfono, núnero,...)
 +
:* [https://api.flutter.dev/flutter/material/TextField/decoration.html decoration]: Para indicar la decoración que queremos que tenga la caja de texto alrededor del texto.
  
  

Revisión del 20:25 14 sep 2021

Introducción

  • Al manejar cajas de texto, voy a necesitar 'guardar' la información introducida en el formulario en variables, por lo que voy a necesitar hacer uso de StatefulWidget´s.
  • Creamos una nueva página en la carpeta pages de nombre formulario_page.dart
En todas las páginas haremos lo mismo:
  • Importamos la librería de 'material' (recordar que existe un snippet que lo hace automático).
  • Creamos una clase (FormularioPage) 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)
  • Como vamos a añadir múltiples elementos de formulario, vamos a crear un ListView dentro del body del Scaffold, para tener scroll vertical...



TextField

  • Nota: Indicar que este Widget es usado para recuperar información introducida por el usuario, pero en el caso de tener un formulario en el que vamos a recuperar información de múltiples elementos (y no sólo cajas de texto) es más conveniento hacer uso del TextFormField como veremos después. En este caso es posible realizar una validación de los campos del formulario antes de hacer uso de los datos.


  • Propiedades más importantes:
  • autofocus: Permite que al iniciarse la aplicación el foco esté sobre la caja de texto.
  • textCapitalization: Para indicar si las letras, palabras, frases son en mayúscula.
  • maxLength: Número máximo de caracteres.
  • keyboardType: Establece el tipo de teclado en base al tipo de información que se va a introducir (por ejemplo, email, teléfono, núnero,...)
  • decoration: Para indicar la decoración que queremos que tenga la caja de texto alrededor del texto.



Enlace a la página principal de la UD4

Enlace a la página principal del curso




-- Ángel D. Fernández González -- (2021).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Flutter_StatefulWidget._Formularios&oldid=15835»