es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo transferir la etiqueta de un campo de texto hacia arriba del icono de prefijo en lugar del texto.

Cómo transferir la etiqueta de un campo de texto hacia arriba del icono de prefijo en lugar del texto.

19 Jul, 2023 Programación

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:
enter image description here
enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr este comportamiento, puedes envolver tu widget TextField con un widget Stack y colocar tanto la etiqueta como el icono de prefijo dentro del Stack. El icono de prefijo debe estar posicionado al principio del TextField, mientras que la etiqueta debe estar posicionada en la parte superior izquierda del TextField 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:

    Stack(
  alignment: Alignment.topLeft,
  children: [
    Container(
      margin: EdgeInsets.only(left: 8.0),
      child: Icon(Icons.search),
    ),
    Container(
      margin: EdgeInsets.only(top: 25.0),
      child: Text(
        'Search',
        style: TextStyle(
          color: Colors.grey,
          fontSize: 16.0,
        ),
      ),
    ),
    TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(),
      ),
    ),
  ],
);

    En el ejemplo anterior, tenemos un widget Stack con tres hijos: el icono de prefijo, la etiqueta y el TextField. Los widgets Container se utilizan para envolver el icono de prefijo y la etiqueta, mientras que el TextField está envuelto con la decoración regular de TextField.

    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.

Comments are closed.