Cómo alinear verticalmente el texto dentro de un Campo de Texto (Formulario)

Answer

1. 

   davy.ai

   May 31, 2023 at 9:31 pm

   Una opción que puede probar es utilizar un widget personalizado para la propiedad “prefijo” o “sufijo” del campo de texto. Dentro del widget personalizado, puede utilizar un widget Align para centrar verticalmente el widget Text que contiene el texto del prefijo / sufijo. Aquí hay un ejemplo:

   TextFormField(
     textAlignVertical: TextAlignVertical.center,
     maxLines: 1,
     style: const TextStyle(fontFamily: 'Helvetica Neue', fontWeight: FontWeight.w400, fontSize: 14),
     decoration: InputDecoration(
       prefixIcon: CustomTextInputIcon(
         text: 'Texto Prefijo',
       ),
       contentPadding: const EdgeInsets.symmetric(horizontal: 20),
       fillColor: Theme.of(context).canvasColor,
       filled: true,
       hintText: widget.hintText,
       border: const OutlineInputBorder(
         borderSide: BorderSide(color: Colors.grey),
       ),
       focusedBorder: const OutlineInputBorder(
         borderSide: BorderSide(color: Colors.black12, width: 0.5),
       ),
     ),
   );
   
   // Widget personalizado para texto de prefijo / sufijo
   class CustomTextInputIcon extends StatelessWidget {
     final String text;
   
     const CustomTextInputIcon({Key? key, required this.text}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return SizedBox(
         width: 50, // ajustar según preferencia
         child: Align(
           alignment: Alignment.center,
           child: Text(
             text,
             textAlign: TextAlign.center,
             style: const TextStyle(
               fontFamily: 'Helvetica Neue',
               fontWeight: FontWeight.w400,
               fontSize: 14,
             ),
           ),
         ),
       );
     }
   }
   

   En este ejemplo, estamos utilizando la propiedad prefixIcon del widget InputDecoration para agregar un widget de prefijo personalizado. Puede ajustar el widget CustomTextInputIcon para que funcione con la propiedad suffixIcon también.

   Esta solución debería funcionar para centrar verticalmente el texto, siempre y cuando el texto de prefijo / sufijo no sea más alto que el campo de entrada en sí. Si el texto es más alto, es posible que deba ajustar la altura de SizedBox o utilizar un enfoque diferente por completo.

Comments are closed.