Diferencia entre revisiones de «Flutter StatefulWidget. Formularios»

De MediaWiki
Ir a la navegación Ir a la búsqueda
Línea 486: Línea 486:
 
<br />
 
<br />
  
−
==CheckBox==
+
==Checkbox / CheckboxListTile==
  
 
* Más información: https://api.flutter.dev/flutter/material/Checkbox-class.html
 
* Más información: https://api.flutter.dev/flutter/material/Checkbox-class.html
Línea 495: Línea 495:
  
  
−
* Veamos un ejemplo sobre la página creada previamente:
+
* Visualmente un Chekbox visualiza un check sin texto asociado.
 +
: Si queremos añadir un texto al mismo, podemos hacer uso del [https://api.flutter.dev/flutter/material/CheckboxListTile-class.html CheckboxListTile], con el parámetro titled. Podemos emplear los mismos parámetro que con el Checkbox.
  
  
 +
 +
* Veamos un ejemplo sobre la página creada previamente empleando un CheckboxListTile:
 +
[[Imagen:Flutter_dart_formulario_4.JPG|300px|center]]
 +
 +
:<syntaxhighlight lang="java" enclose="div" highlight="19,54,58-68" >
 +
import 'package:flutter/material.dart';
 +
 +
class FormularioPage extends StatefulWidget {
 +
  const FormularioPage({Key? key}) : super(key: key);
 +
 +
  @override
 +
  _FormularioPageState createState() => _FormularioPageState();
 +
}
 +
 +
 +
class _FormularioPageState extends State<FormularioPage> {
 +
  String _nombre = '';
 +
  String _email = '';
 +
  String _password = '';
 +
 +
  List<String> _optTipoPaciente = ['Crónico', 'Terminal', 'Observación'];
 +
  String _valorEscojidoTipoPaciente = 'Crónico';
 +
 +
  bool _checkEnfermedadTerminal = false;
 +
 +
  @override
 +
  Widget build(BuildContext context) {
 +
    return Scaffold(
 +
        appBar: AppBar(
 +
          title: Text('Formulario'),
 +
        ),
 +
        body: ListView(
 +
          padding: EdgeInsets.symmetric(horizontal: 5.0,vertical: 10.0),
 +
          children: [
 +
            _crearInput(),    // TextField con múltiples opciones de decoración
 +
            Divider(),
 +
            _crearEmail(),
 +
            Divider(),
 +
            _crearPassword(),
 +
            Divider(),
 +
            _crearDropDown(),
 +
            Divider(),
 +
            _crearCheckBox(),
 +
            Divider(),
 +
            Divider(),
 +
            _visualizarDatos(),
 +
 +
          ],
 +
        ));
 +
  }
 +
 +
  Widget _visualizarDatos(){
 +
    return Column(
 +
      children: [
 +
        Text('Nombre del paciente: $_nombre'),
 +
        Text('Email del paciente: $_email'),
 +
        Text('Password: $_password'),
 +
        Text('Tipo de paciente: $_valorEscojidoTipoPaciente'),
 +
        Text('Enfermedad terminal: $_checkEnfermedadTerminal')
 +
      ],
 +
    );
 +
  }
 +
  Widget _crearCheckBox(){
 +
    return CheckboxListTile(
 +
        title: Text('Enfermedad terminal'),
 +
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0),side: BorderSide(color: Colors.grey)),
 +
        value: _checkEnfermedadTerminal,
 +
        onChanged: (nuevoValor) {  // Hay que llamar a setState para que redibuje el CheckBox
 +
          setState(() { _checkEnfermedadTerminal = nuevoValor! ;});
 +
        }
 +
 +
    );
 +
  }
 +
  Widget _crearDropDown(){
 +
    return Container(
 +
      height: 60.0,
 +
      padding: EdgeInsets.only(left: 8.0),
 +
      decoration: BoxDecoration(
 +
        borderRadius: BorderRadius.circular(15.0),
 +
        border: Border.all(
 +
          color: Colors.grey
 +
        )
 +
      ),
 +
      child: Row(
 +
        children: [
 +
          DropdownButton(
 +
            value: _valorEscojidoTipoPaciente,
 +
            onChanged: (String? valor) { setState(() { _valorEscojidoTipoPaciente = valor!; });},
 +
            items: _crearItemsDropDown(),
 +
 +
          ),
 +
          Spacer(),
 +
          Container(child: Icon(Icons.api),
 +
                    padding: EdgeInsets.only(right: 10.0),
 +
          ),
 +
        ],
 +
      ),
 +
    );
 +
  }
 +
 +
  List<DropdownMenuItem<String>> _crearItemsDropDown(){
 +
 +
    List<DropdownMenuItem<String>> lista = [];
 +
    _optTipoPaciente.forEach((element) {
 +
      lista.add(DropdownMenuItem(child: Text('$element'),value: element,));
 +
    });
 +
 +
    return lista;
 +
  }
 +
 +
  Widget _crearEmail(){
 +
 +
    return TextField(
 +
      onChanged: (valor) => setState((){
 +
                                        _email = valor;
 +
                                        print(valor);}
 +
                                    ),  // Fijarse que podemos guardar una cadena vacía
 +
      keyboardType: TextInputType.emailAddress,
 +
      decoration: InputDecoration(
 +
        hintText: 'Email del paciente',
 +
        labelText: 'Email',
 +
        suffixIcon: Icon(Icons.email),
 +
        border: OutlineInputBorder(
 +
          borderRadius: BorderRadius.circular(15.0),
 +
        )
 +
      ),
 +
    );
 +
  }
 +
 +
 +
  Widget _crearPassword(){
 +
 +
    return TextField(
 +
      onChanged: (valor) => setState((){_password = valor;}),  // Fijarse que podemos guardar una cadena vacía
 +
      obscureText: true,
 +
      obscuringCharacter: '-',
 +
      maxLength: 20,
 +
      decoration: InputDecoration(
 +
          hintText: 'Password de entrada',
 +
          labelText: 'Password',
 +
          suffixIcon: Icon(Icons.password),
 +
          border: OutlineInputBorder(
 +
            borderRadius: BorderRadius.circular(15.0),
 +
          )
 +
      ),
 +
    );
 +
  }
 +
 +
  Widget _crearInput() {
 +
 +
    return TextField(
 +
      onChanged: (valor) => setState((){_nombre = valor;}),  // Fijarse que podemos guardar una cadena vacía
 +
      textCapitalization: TextCapitalization.words,
 +
      keyboardType: TextInputType.name,
 +
      decoration: InputDecoration(
 +
        border: OutlineInputBorder(    // Establece un borde cicular/otro  alrededor de la caja de texto
 +
          borderRadius: BorderRadius.circular(15.0),
 +
        ),
 +
        counterText: 'Número de caracteres: ${_nombre.length}',  // Texto que aparece a la derecha y debajo de la caja
 +
        hintText: 'Nombre del paciente',          // Texto que aparece dentro de la caja y desaparece al escribir
 +
        labelText: 'Nombre',                      // Texto qye aparece encima de la caja AL PULSAR EN EL INTERIOR PARA ESCRIBIR
 +
        helperText: 'Introduce el nombre del paciente',  // Texto que aparece a la izquierda y abajo de la caja
 +
        suffixIcon: Icon(Icons.access_alarm),    // Widget que aparece a la derecha dentro de la caja
 +
        icon: Icon(Icons.accessibility),          // Widget que aparece a la izquierda fuera de la caja
 +
 +
      ),
 +
    );
 +
 +
  }
 +
 +
}
 +
 +
 +
 +
</syntaxhighlight>
 
<br />
 
<br />
  

Revisión del 16:22 17 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.
  • obscureText y obscuringCharacter: Para cambiar el caracter visible por otro. Empleado para campos password, por ejemplo.


  • Un ejemplo de uso.
Creamos una nueva página en la carpeta pages/stateful 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 (al hacerlo se creará una clase _FormularioPageState asociada que deriva de State).
En el método build de la clase State retornamos un Scaffold con AppBar y el body los constituye un ListView
En este ejemplo se visualizan las propiedades descritas anteriormente, creando tres campos, uno para un nombre, otro para un email y otro para un password.
Flutter dart formulario 1.JPG


import 'package:flutter/material.dart';

class FormularioPage extends StatefulWidget {
  const FormularioPage({Key? key}) : super(key: key);

  @override
  _FormularioPageState createState() => _FormularioPageState();
}

class _FormularioPageState extends State<FormularioPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Formulario'),
        ),
        body: ListView(
          padding: EdgeInsets.symmetric(horizontal: 5.0,vertical: 10.0),
          children: [
            _crearInput(),    // TextField con múltiples opciones de decoración
            Divider(),
            _crearEmail(),
            Divider(),
            _crearPassword(),

          ],
        ));
  }

  Widget _crearEmail(){

    return TextField(
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        hintText: 'Email del paciente',
        labelText: 'Email',
        suffixIcon: Icon(Icons.email),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(15.0),
        )
      ),
    );
  }


  Widget _crearPassword(){

    return TextField(
      obscureText: true,
      obscuringCharacter: '-',
      maxLength: 20,
      decoration: InputDecoration(
          hintText: 'Password de entrada',
          labelText: 'Password',
          suffixIcon: Icon(Icons.password),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15.0),
          )
      ),
    );
  }

  Widget _crearInput() {

    return TextField(
      textCapitalization: TextCapitalization.words,
      maxLength: 10,
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
        border: OutlineInputBorder(     // Establece un borde cicular/otro  alrededor de la caja de texto
          borderRadius: BorderRadius.circular(15.0),
        ),
        counterText: 'Número de caracteres: 0',   // Texto que aparece a la derecha y debajo de la caja
        hintText: 'Nombre del paciente',          // Texto que aparece dentro de la caja y desaparece al escribir
        labelText: 'Nombre',                      // Texto qye aparece encima de la caja AL PULSAR EN EL INTERIOR PARA ESCRIBIR
        helperText: 'Introduce el nombre del paciente',  // Texto que aparece a la izquierda y abajo de la caja
        suffixIcon: Icon(Icons.access_alarm),     // Widget que aparece a la derecha dentro de la caja
        icon: Icon(Icons.accessibility),          // Widget que aparece a la izquierda fuera de la caja

      ),
    );

  }

}



Guardando el valor del TextField

  • Para guardar el valor necesitamos capturar algún evento.
En este ejemplo, vamos a capturar el evento de onChanged, que se lanza cada vez que el usuario cambia el contenido de la caja de texto.
Lo que voy a hacer es guardar el valor de cada caja de texto en una variable definida previamente en la clase State.
Nota Importante: Recordar que necesitamos llamar al método setState para que 'redibuje' el StatefulWidget y se visualicen el valor de las variables.


  • Modificamos por tanto el ejemplo anterior para añadirle la nueva funcionalidad.
Flutter dart formulario 2.JPG


import 'package:flutter/material.dart';

class FormularioPage extends StatefulWidget {
  const FormularioPage({Key? key}) : super(key: key);

  @override
  _FormularioPageState createState() => _FormularioPageState();
}

class _FormularioPageState extends State<FormularioPage> {
  String _nombre = '';
  String _email = '';
  String _password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Formulario'),
        ),
        body: ListView(
          padding: EdgeInsets.symmetric(horizontal: 5.0,vertical: 10.0),
          children: [
            _crearInput(),    // TextField con múltiples opciones de decoración
            Divider(),
            _crearEmail(),
            Divider(),
            _crearPassword(),
            Divider(),
            Divider(),
            _visualizarDatos(),

          ],
        ));
  }

  Widget _visualizarDatos(){
    return Column(
      children: [
        Text('Nombre del paciente: $_nombre'),
        Text('Email del paciente: $_email'),
        Text('Password: $_password')
      ],
    );
  }

  Widget _crearEmail(){

    return TextField(
      onChanged: (valor) => setState((){
                                        _email = valor;
                                        print(valor);}
                                    ),   // Fijarse que podemos guardar una cadena vacía
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        hintText: 'Email del paciente',
        labelText: 'Email',
        suffixIcon: Icon(Icons.email),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(15.0),
        )
      ),
    );
  }


  Widget _crearPassword(){

    return TextField(
      onChanged: (valor) => setState((){_password = valor;}),   // Fijarse que podemos guardar una cadena vacía
      obscureText: true,
      obscuringCharacter: '-',
      maxLength: 20,
      decoration: InputDecoration(
          hintText: 'Password de entrada',
          labelText: 'Password',
          suffixIcon: Icon(Icons.password),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15.0),
          )
      ),
    );
  }

  Widget _crearInput() {

    return TextField(
      onChanged: (valor) => setState((){_nombre = valor;}),   // Fijarse que podemos guardar una cadena vacía
      textCapitalization: TextCapitalization.words,
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
        border: OutlineInputBorder(     // Establece un borde cicular/otro  alrededor de la caja de texto
          borderRadius: BorderRadius.circular(15.0),
        ),
        counterText: 'Número de caracteres: ${_nombre.length}',   // Texto que aparece a la derecha y debajo de la caja
        hintText: 'Nombre del paciente',          // Texto que aparece dentro de la caja y desaparece al escribir
        labelText: 'Nombre',                      // Texto qye aparece encima de la caja AL PULSAR EN EL INTERIOR PARA ESCRIBIR
        helperText: 'Introduce el nombre del paciente',  // Texto que aparece a la izquierda y abajo de la caja
        suffixIcon: Icon(Icons.access_alarm),     // Widget que aparece a la derecha dentro de la caja
        icon: Icon(Icons.accessibility),          // Widget que aparece a la izquierda fuera de la caja

      ),
    );

  }

}



DropDown / DropDownMenuItem

  • El dropdown es un componente gráfico que permite guardar un conjunto de opciones que son visualizadas al presionar en dicho control. De esas opciones, queda visualmente seleccionada una de ellas.
En otro lenguajes de conoce como combobox.
  • Parémtros del constructor más importantes:
Los DropDownMenuITem pueden ser de cualquier tipo (en la definición pone dynamic) y por tanto podemos pasar objetos de clases, visualizándose el contenido del método toString().
El constructor tiene dos parámetros importantes:
  • child: El widget que se va a visualizar.
  • value: El valor asociado al elemento de la lista.
  • onChanged: Si no definimos esta función, los elementos del DropDown estarán inhabilitados.
  • value: El valor que representa el elemento seleccionado. Cada elemento de la lista (DropDownMenuItem) va a tener la propiedad 'value' que indica el 'valor' de esa opción. Al cambiar esta variable, cambiamos el elemento seleccionado de la lista.


  • Veamos un ejemplo siguiendo con el ejercicio anterior:
class _FormularioPageState extends State<FormularioPage> {
  String _nombre = '';
  String _email = '';
  String _password = '';

  int _valorEscojidoDropDown = 1;


  .............

 Widget _crearDropDown(){
    return DropdownButton(
      value: _valorEscojidoDropDown,
      onChanged: (int? valor) { setState(() {

        _valorEscojidoDropDown = valor ?? 1;  // Como puede que no se seleccione un valor, debemos de dar un valor por defecto
      });},
      items: [
        DropdownMenuItem<int>(child: Text('Opción 1'),value: 1),
        DropdownMenuItem<int>(child: Text('Opción 2'),value: 2),
        DropdownMenuItem<int>(child: Text('Opción 3'),value: 3),

      ],
    );
  }
  • Fijarse en los siguientes aspectos:
  • Cada elemento de la lista (DropDownMenuItem) visualizar un Text como Widget y asocia a cada elemento de la lista un núnero (value)
Por eso, en la definición del DropdownMenuItem<int> especificamos <int> como tipo de dato. Este tendremos que cambiarlo dependiendo del tipo de value que guardemos.
  • Como comenté anteriormente es necesario definir el método onChanged para que se pueda 'seleccionar' el elemento de la lista. Se define una función que recibe como parámetro el value del elemento seleccionado (recordar que es un int en este ejemplo). Puede suceder que no haya ningún elemento seleccionado y por tanto pueda tener valor nulo, por lo que la variable 'valor' está definida como 'int? valor'.
Al pulsar un elemento de la lista queremos 'redibujar' el statefulwidget, por lo que llamamos al método setState(). Dentro del mismo cambiamos un valor de una variable definida previamente de nombre '_valorEscojidoDropDown '.
  • La variable '_valorEscojidoDropDown' es usada en el parámetro 'value' para indicar cual es el elememto seleccionado de la lista.



  • Veamos ahora el mismo ejemplo, pero cambiando los datos del DropdownButton. Ahora están definidos en una variable (una lista) en la clase State.
  • Además he envuelto el DropdownMenu en un Container para que tenga un borde redondeado y así se parezca al resto de campos.
Flutter dart formulario 3.JPG


El código de la página Furmulario_page.dart 

import 'package:flutter/material.dart';

class FormularioPage extends StatefulWidget {
  const FormularioPage({Key? key}) : super(key: key);

  @override
  _FormularioPageState createState() => _FormularioPageState();
}


class _FormularioPageState extends State<FormularioPage> {
  String _nombre = '';
  String _email = '';
  String _password = '';

  List<String> _optTipoPaciente = ['Crónico', 'Terminal', 'Observación'];
  String _valorEscojidoTipoPaciente = 'Crónico';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Formulario'),
        ),
        body: ListView(
          padding: EdgeInsets.symmetric(horizontal: 5.0,vertical: 10.0),
          children: [
            _crearInput(),    // TextField con múltiples opciones de decoración
            Divider(),
            _crearEmail(),
            Divider(),
            _crearPassword(),
            Divider(),
            _crearDropDown(),
            Divider(),
            Divider(),
            _visualizarDatos(),

          ],
        ));
  }

  Widget _crearDropDown(){
    return Container(
      height: 60.0,
      padding: EdgeInsets.only(left: 8.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15.0),
        border: Border.all(
          color: Colors.grey
        )
      ),
      child: Row(
        children: [
          DropdownButton(
            value: _valorEscojidoTipoPaciente,
            onChanged: (String? valor) { setState(() { _valorEscojidoTipoPaciente = valor!; });},
            items: _crearItemsDropDown(),

          ),
          Spacer(),
          Container(child: Icon(Icons.api),
                    padding: EdgeInsets.only(right: 10.0),
          ),
        ],
      ),
    );
  }

  List<DropdownMenuItem<String>> _crearItemsDropDown(){

    List<DropdownMenuItem<String>> lista = [];
    _optTipoPaciente.forEach((element) {
       lista.add(DropdownMenuItem(child: Text('$element'),value: element,));
    });

    return lista;
  }


  Widget _visualizarDatos(){
    return Column(
      children: [
        Text('Nombre del paciente: $_nombre'),
        Text('Email del paciente: $_email'),
        Text('Password: $_password'),
        Text('Tipo de paciente: $_valorEscojidoTipoPaciente')
      ],
    );
  }

  Widget _crearEmail(){

    return TextField(
      onChanged: (valor) => setState((){
                                        _email = valor;
                                        print(valor);}
                                    ),   // Fijarse que podemos guardar una cadena vacía
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        hintText: 'Email del paciente',
        labelText: 'Email',
        suffixIcon: Icon(Icons.email),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(15.0),
        )
      ),
    );
  }


  Widget _crearPassword(){

    return TextField(
      onChanged: (valor) => setState((){_password = valor;}),   // Fijarse que podemos guardar una cadena vacía
      obscureText: true,
      obscuringCharacter: '-',
      maxLength: 20,
      decoration: InputDecoration(
          hintText: 'Password de entrada',
          labelText: 'Password',
          suffixIcon: Icon(Icons.password),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15.0),
          )
      ),
    );
  }

  Widget _crearInput() {

    return TextField(
      onChanged: (valor) => setState((){_nombre = valor;}),   // Fijarse que podemos guardar una cadena vacía
      textCapitalization: TextCapitalization.words,
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
        border: OutlineInputBorder(     // Establece un borde cicular/otro  alrededor de la caja de texto
          borderRadius: BorderRadius.circular(15.0),
        ),
        counterText: 'Número de caracteres: ${_nombre.length}',   // Texto que aparece a la derecha y debajo de la caja
        hintText: 'Nombre del paciente',          // Texto que aparece dentro de la caja y desaparece al escribir
        labelText: 'Nombre',                      // Texto qye aparece encima de la caja AL PULSAR EN EL INTERIOR PARA ESCRIBIR
        helperText: 'Introduce el nombre del paciente',  // Texto que aparece a la izquierda y abajo de la caja
        suffixIcon: Icon(Icons.access_alarm),     // Widget que aparece a la derecha dentro de la caja
        icon: Icon(Icons.accessibility),          // Widget que aparece a la izquierda fuera de la caja

      ),
    );

  }

}



Checkbox / CheckboxListTile

  • Los parámtros más importantes del constructor son:
  • value: Obligatorio. Normalmente se pone una variable que guardará el valor del checkbox (seleccionado o no)
  • onChanged: Obligatorio. Método al que se llamará cuando se produce un cambio en el checkbox.


  • Visualmente un Chekbox visualiza un check sin texto asociado.
Si queremos añadir un texto al mismo, podemos hacer uso del CheckboxListTile, con el parámetro titled. Podemos emplear los mismos parámetro que con el Checkbox.


  • Veamos un ejemplo sobre la página creada previamente empleando un CheckboxListTile:
Flutter dart formulario 4.JPG
import 'package:flutter/material.dart';

class FormularioPage extends StatefulWidget {
  const FormularioPage({Key? key}) : super(key: key);

  @override
  _FormularioPageState createState() => _FormularioPageState();
}


class _FormularioPageState extends State<FormularioPage> {
  String _nombre = '';
  String _email = '';
  String _password = '';

  List<String> _optTipoPaciente = ['Crónico', 'Terminal', 'Observación'];
  String _valorEscojidoTipoPaciente = 'Crónico';

  bool _checkEnfermedadTerminal = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Formulario'),
        ),
        body: ListView(
          padding: EdgeInsets.symmetric(horizontal: 5.0,vertical: 10.0),
          children: [
            _crearInput(),    // TextField con múltiples opciones de decoración
            Divider(),
            _crearEmail(),
            Divider(),
            _crearPassword(),
            Divider(),
            _crearDropDown(),
            Divider(),
            _crearCheckBox(),
            Divider(),
            Divider(),
            _visualizarDatos(),

          ],
        ));
  }

  Widget _visualizarDatos(){
    return Column(
      children: [
        Text('Nombre del paciente: $_nombre'),
        Text('Email del paciente: $_email'),
        Text('Password: $_password'),
        Text('Tipo de paciente: $_valorEscojidoTipoPaciente'),
        Text('Enfermedad terminal: $_checkEnfermedadTerminal')
      ],
    );
  }
  Widget _crearCheckBox(){
    return CheckboxListTile(
        title: Text('Enfermedad terminal'),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0),side: BorderSide(color: Colors.grey)),
        value: _checkEnfermedadTerminal,
        onChanged: (nuevoValor) {   // Hay que llamar a setState para que redibuje el CheckBox
          setState(() { _checkEnfermedadTerminal = nuevoValor! ;});
        }

    );
  }
  Widget _crearDropDown(){
    return Container(
      height: 60.0,
      padding: EdgeInsets.only(left: 8.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15.0),
        border: Border.all(
          color: Colors.grey
        )
      ),
      child: Row(
        children: [
          DropdownButton(
            value: _valorEscojidoTipoPaciente,
            onChanged: (String? valor) { setState(() { _valorEscojidoTipoPaciente = valor!; });},
            items: _crearItemsDropDown(),

          ),
          Spacer(),
          Container(child: Icon(Icons.api),
                    padding: EdgeInsets.only(right: 10.0),
          ),
        ],
      ),
    );
  }

  List<DropdownMenuItem<String>> _crearItemsDropDown(){

    List<DropdownMenuItem<String>> lista = [];
    _optTipoPaciente.forEach((element) {
       lista.add(DropdownMenuItem(child: Text('$element'),value: element,));
    });

    return lista;
  }

  Widget _crearEmail(){

    return TextField(
      onChanged: (valor) => setState((){
                                        _email = valor;
                                        print(valor);}
                                    ),   // Fijarse que podemos guardar una cadena vacía
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        hintText: 'Email del paciente',
        labelText: 'Email',
        suffixIcon: Icon(Icons.email),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(15.0),
        )
      ),
    );
  }


  Widget _crearPassword(){

    return TextField(
      onChanged: (valor) => setState((){_password = valor;}),   // Fijarse que podemos guardar una cadena vacía
      obscureText: true,
      obscuringCharacter: '-',
      maxLength: 20,
      decoration: InputDecoration(
          hintText: 'Password de entrada',
          labelText: 'Password',
          suffixIcon: Icon(Icons.password),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15.0),
          )
      ),
    );
  }

  Widget _crearInput() {

    return TextField(
      onChanged: (valor) => setState((){_nombre = valor;}),   // Fijarse que podemos guardar una cadena vacía
      textCapitalization: TextCapitalization.words,
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
        border: OutlineInputBorder(     // Establece un borde cicular/otro  alrededor de la caja de texto
          borderRadius: BorderRadius.circular(15.0),
        ),
        counterText: 'Número de caracteres: ${_nombre.length}',   // Texto que aparece a la derecha y debajo de la caja
        hintText: 'Nombre del paciente',          // Texto que aparece dentro de la caja y desaparece al escribir
        labelText: 'Nombre',                      // Texto qye aparece encima de la caja AL PULSAR EN EL INTERIOR PARA ESCRIBIR
        helperText: 'Introduce el nombre del paciente',  // Texto que aparece a la izquierda y abajo de la caja
        suffixIcon: Icon(Icons.access_alarm),     // Widget que aparece a la derecha dentro de la caja
        icon: Icon(Icons.accessibility),          // Widget que aparece a la izquierda fuera de la caja

      ),
    );

  }

}




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=15855»