El widget TextField es un widget esencial para todos los desarrolladores de Flutter. Es un widget básico simple, pero una herramienta poderosa que permite muchas opciones de personalización y funciones útiles.
En esta publicación, exploraremos una colección de fragmentos y trucos de TextField.
1- Configuración básica
La configuración básica de TextField se ve así: TextField() que mostrará un campo de texto en blanco con la configuración predeterminada. A continuación agreguemos una etiqueta.
2- Etiquetas
Las etiquetas de TextField son bastante sencillas, pero también están altamente personalizadas. Las etiquetas son parte del TextField. decoración InputDecoration(). Puede agregar la etiqueta, personalizar el estilo de la etiqueta, agregar y personalizar etiquetas flotantes y más.
3- Iconos
El widget TextField le ofrece agregar 3 tipos diferentes de íconos para la entrada de su campo de texto: un básico iconoa prefijoIcono que estará al comienzo de su Entrada, y un sufijoIcono que se mostrará al final de su entrada de TextField.
3- Dirección del texto: LTR y RTL
La dirección del texto es esencial, especialmente cuando su aplicación admitirá idiomas RTL (de derecha a izquierda) como árabe, persa y hebreo.
A continuación se explica cómo agregar la dirección del texto al widget TextField:
TextField(
textDirection: TextDirection.ltr,
)
4- Campo de contraseña
Para agregar un campo de contraseña, solo necesita oscurecer el texto de la siguiente manera
const TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
)
5- Completar previamente el texto
Si desea agregar un texto precargado a su entrada TextField, simplemente puede usar: initialValue
TextFormField(
initialValue: "Initial Value String")
6- Soporte multilínea
El soporte multilínea le permite agregar un texto grande; con el widget TextField, simplemente puede configurar las líneas máxima y mínima:
TextField(
textDirection: TextDirection.ltr,
maxLines: 10,
decoration: InputDecoration()
)
7- Cenefas de decoración
Los bordes de entrada de TextField pueden ser complicados, pero tan pronto como lo dominas, es bastante divertido:
Primero, para agregar y personalizar un borde de entrada simple, usamos: OutlineInputBorder
TextField(
decoration: InputDecoration(
label: Text('Title'),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20))),
),
Puede configurar muchas opciones de borde como colores, estilo y fronteraRadio.
Para desactivar los bordes simplemente puedes usar: InputBorder.none
TextField(
decoration: InputDecoration(
label: Text('Title'),
border: InputBorder.none
),
8- Colores
La configuración de los colores de entrada se puede realizar desde dentro decoration Además, puedes simplemente agregar un color de rellenocolocar iconoColor, enfoqueColor, color de libracióny prefijoIcono/ sufijoIcono colores.
No lo olvide color de relleno se ve afectado por su colores del tema, que puedes configurar directamente desde tu MaterialApp:
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue,
),
),
Aquí cómo configurar sus rellenos de entrada usando Datos del tema:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
inputDecorationTheme: const InputDecorationTheme(
filled: true,
fillColor: Colors.red,
),
),
home: HomeScreen(),
);
9- Enfoque
Focus es una buena adición para agregar a su entrada de TextField, la hace activa. También puede utilizar para notificar al usuario de un error.
10- Teclados
Teclados le permite configurar el tipo de valor que desea ingresar usando un teclado específico: como números, texto, fecha y hora, teléfono, URL, contraseña, dirección de correo electrónico y más.
Estos son los tipos de teclado más útiles:
- Tipodeentradadetexto.número: Abre un teclado numérico
- TextoInputType.datetime: Proporciona un teclado numérico optimizado para fecha y hora.
- TextInputType.multilínea: admite entrada de texto de varias líneas
- TextInputType.dirección de correo electrónico: un teclado personalizado para la dirección de correo electrónico con el botón “@”.
- TextoInputType.teléfono: Un teclado especial para agregar números de teléfono
11- HintText (también conocido como marcador de posición)
HitText es el equivalente de Flutter TextField para el “marcador de posición” HTML5, puedes agregarlo así:
TextField(
decoration: InputDecoration(hintText: "Type your name here ..."),)
También puedes establecer una dirección de HintText usando: hintTextDirection: TextDirection.rtl.
12- Obteniendo los datos
Para obtener el valor de TextField, necesitará usar un controlador, aquí se explica cómo:
Primero, define su controlador TextField:
final TextEditingController _title = TextEditingController();
Luego agregas este controlador a tu TextField como:
TextField(
controller: _title,
decoration: InputDecoration(
label: Text('Title'),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20))),
),
El TextEditingController() le permite recuperar su valor de Texto, completar previamente su valor y, lo más importante, observar cualquier actualización.
El valor de TextField se puede recuperar así en sus funciones, le proporciona acceso directo a sus métodos TextEditingController:
_title.text
13- Limpiar
Para borrar su entrada, después del envío del formulario como ejemplo, simplemente acceda al método de borrado de su controlador:
void clearText() {
_title.clear();
}
14-Error
El texto de error le permite adjuntar un mensaje de error a su TextField:
15- Etiqueta flotante
La etiqueta flotante es un efecto de etiqueta animado y elegante que se activa tan pronto como comienzas a escribir.
16- Devoluciones de llamada
El widget TextField viene con una devolución de llamada útil que se puede usar directamente cuando sea necesario como: enCambiado, en edición completa, en el toqueonSubmitted, onAppPrivateCommand y onTabOutside.
17- Enfoque automático
Le permite configurar el enfoque automático en su widget TextField tan pronto como se crea:
TextField(
autofocus: true,
),
18- Sólo lectura
Para que su TextField esté listo únicamente: simplemente agregue readOnly: true
child: TextField(
controller: titleController,
readOnly: true,
decoration: InputDecoration(
border: InputBorder.none, hintText: "title...."),
),
19- Acción de entrada de texto
La opción TextInputAction habilita una acción personalizada agregada al teclado. Puede seleccionar el adecuado para sus necesidades:
20- Autocorrección
La autocorrección es una función útil; puede habilitarla o deshabilitarla por campo, de la siguiente manera:
TextField(
autocorrect: false,
)
Etiquetas
Programación Flutter Desarrollo móvil de código abierto Desarrollo web Lista Tutorial
