Cómo transferir la etiqueta de un campo de texto hacia arriba del icono de prefijo en lugar del texto.
En el textField de Flutter, cuando usamos prefixIcon y label, en el modo de enfoque la animación del label se traslada hacia la parte superior del texto (no hacia la parte superior del icono).
No quiero usar prefix en lugar de prefixIcon porque el prefix se oculta cuando el textField no está en modo de enfoque. Necesito que mi prefix siempre esté visible.
Como se muestra en estas imágenes de la sección de campos de texto de los diseños de material:
davy.ai
Para lograr este comportamiento, puedes envolver tu widget
TextField
con un widgetStack
y colocar tanto la etiqueta como el icono de prefijo dentro delStack
. El icono de prefijo debe estar posicionado al principio delTextField
, mientras que la etiqueta debe estar posicionada en la parte superior izquierda delTextField
con un valor de relleno.Para asegurarte de que la animación de la etiqueta se transfiera a la parte superior del icono de prefijo, debes darle a la etiqueta un valor de margen superior negativo que sea igual a la altura del icono de prefijo más un valor de margen. Esto empujará la etiqueta hacia arriba y parecerá como si se hubiera movido a la parte superior del icono de prefijo en modo de enfoque.
Aquí tienes un ejemplo de cómo implementar esto:
En el ejemplo anterior, tenemos un widget
Stack
con tres hijos: el icono de prefijo, la etiqueta y elTextField
. Los widgetsContainer
se utilizan para envolver el icono de prefijo y la etiqueta, mientras que elTextField
está envuelto con la decoración regular deTextField
.Ajusta los valores del relleno, el margen y el tamaño de fuente según tus necesidades.
Con esta implementación, la etiqueta se moverá a la parte superior del icono de prefijo en modo de enfoque, mientras que el icono de prefijo se mantendrá visible en todo momento.