TextFormField

 

TextFormField en Flutter: Un Campo de Texto Más Completo

¿Qué es un TextFormField?

En Flutter, TextFormField es una extensión del widget TextField. Si bien ambos permiten a los usuarios ingresar texto, TextFormField está diseñado específicamente para ser utilizado dentro de formularios. Esto significa que viene con características adicionales que facilitan la validación, la integración con otros widgets de formulario y la gestión de estados.

¿Por qué usar TextFormField en lugar de TextField?

  • Validación: TextFormField incluye un atributo validator que te permite definir reglas de validación personalizadas para el texto ingresado. Esto es ideal para asegurar que los datos ingresados por el usuario cumplan con ciertos criterios.
  • Integración con Form: Se integra perfectamente con el widget Form, lo que facilita la creación de formularios completos con múltiples campos y validación.
  • Gestión de estado: TextFormField puede ser parte de un Stateful widget, lo que te permite mantener un seguimiento del valor ingresado y actualizarlo en consecuencia.

¿Cómo se usa?

Dart
import 'package:flutter/material.dart';

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends    State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  String    _email = '';

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText:    'Email',
            ),
            validator: (value) {
              if (value == null || !value.contains('@')) {
                return 'Por favor ingresa un email válido';
              }
              return null;
            },
            onChanged: (value)    {
              setState(() {
                _email = value;
              });
            },
          ),
          // Otros campos del formulario
        ],
      ),
    );
  }
}

Explicación del código:

  • Form: Envuelve todos los campos del formulario y proporciona un contexto para la validación.
  • TextFormField: Define un campo de texto individual.
  • validator: Esta función se ejecuta cuando se envía el formulario. Si el valor ingresado no es válido, devuelve un mensaje de error.
  • onChanged: Esta función se ejecuta cada vez que el usuario cambia el texto y actualiza el estado del widget.

Características clave de TextFormField:

  • Validación personalizada: Define tus propias reglas de validación utilizando el atributo validator.
  • Integración con Form: Forma parte de un formulario completo para una mejor gestión.
  • Gestión del estado: Utiliza setState para actualizar el valor del campo y otros estados relacionados.
  • Otras propiedades: keyboardType, obscureText, maxLength, maxLines, etc., al igual que TextField.

En resumen, TextFormField es una herramienta poderosa para crear formularios robustos y fáciles de usar en tus aplicaciones Flutter. Al aprovechar sus características de validación y gestión de estado, puedes asegurarte de que los datos ingresados por el usuario sean correctos y consistentes.


Comentarios

Entradas más populares de este blog

Paquete http en Flutter

Image

Menú lateral Drawer.