Flutter textfield cómo posicionar la etiqueta flotante y la etiqueta de error.

Answer

1. 

   davy.ai

   July 19, 2023 at 5:47 pm

   Para lograr este diseño en un TextField reutilizable, puede crear un widget personalizado que extienda TextField e implemente las siguientes propiedades y métodos:

   1. Sobrescriba el método build para crear un widget TextField personalizado con el diseño requerido.

   2. Agregue una propiedad bool llamada isFocused para rastrear cuándo el texto está seleccionado por el usuario.

   3. Utilice un callback onChanged para detectar cuándo el contenido del texto ha cambiado.

   4. Utilice un FocusNode para detectar cuándo el campo de texto está seleccionado o deseleccionado.

   5. Utilice un TextEditingController para controlar el contenido del campo de texto.

   6. Utilice un GlobalKey para acceder al estado del widget y activar actualizaciones cuando sea necesario.

   7. Posicione las etiquetas flotantes y de error utilizando widgets Positioned y calcule la posición correcta en función del estado del campo de texto.

   Aquí hay un ejemplo de implementación de un widget TextField reutilizable con el diseño solicitado:

   class CustomTextField extends StatefulWidget {
     final String labelText;
     final String errorText;
     final TextEditingController controller;
     final TextInputType keyboardType;
     final bool obscureText;
     final Function(String) onChanged;
   
     const CustomTextField({
       Key? key,
       required this.labelText,
       required this.controller,
       this.errorText = '',
       this.keyboardType = TextInputType.text,
       this.obscureText = false,
       required this.onChanged,
     }) : super(key: key);
   
     @override
     _CustomTextFieldState createState() => _CustomTextFieldState();
   }
   
   class _CustomTextFieldState extends State<customtextfield> {
     bool isFocused = false;
     final FocusNode _focusNode = FocusNode();
   
     @override
     void initState() {
       super.initState();
       _focusNode.addListener(() {
         setState(() {
           isFocused = _focusNode.hasFocus;
         });
       });
     }
   
     @override
     void dispose() {
       _focusNode.dispose();
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return Stack(
         children: [
           TextField(
             controller: widget.controller,
             keyboardType: widget.keyboardType,
             obscureText: widget.obscureText,
             onChanged: widget.onChanged,
             focusNode: _focusNode,
             decoration: InputDecoration(
               contentPadding: EdgeInsets.only(
                 top: isFocused ? 20.0 : 10.0,
                 bottom: 10.0,
                 left: 10.0,
                 right: 10.0,
               ),
               labelText: widget.labelText,
               labelStyle: TextStyle(
                 color: isFocused ? Colors.blue : Colors.grey,
               ),
               border: OutlineInputBorder(
                 borderSide: BorderSide(
                   color: isFocused ? Colors.blue : Colors.grey,
                 ),
               ),
               enabledBorder: OutlineInputBorder(
                 borderSide: BorderSide(
                   color: isFocused ? Colors.blue : Colors.grey,
                 ),
               ),
               errorText: widget.errorText,
               errorStyle: TextStyle(
                 color: Colors.red,
               ),
             ),
           ),
           if (widget.errorText.isNotEmpty || isFocused)
             Positioned(
               top: isFocused ? -5.0 : 15.0,
               left: 10.0,
               child: Text(
                 widget.errorText.isNotEmpty ? widget.errorText : widget.labelText,
                 style: TextStyle(
                   color: widget.errorText.isNotEmpty ? Colors.red : Colors.blue,
                   fontSize: isFocused ? 12.0 : 16.0,
                 ),
               ),
             ),
         ],
       );
     }
   }
   

   Con este widget TextField personalizado, puede agregar o eliminar mensajes de error y validación de entrada fácilmente, y reutilizar el mismo diseño en toda su aplicación.

Comments are closed.