¿Cómo cambiar la altura y el ancho de TextField?

Estate atento porque en este artículo vas a encontrar la respuesta que buscas.Este artículo ha sido probado por nuestros expertos para garantizar la calidad y exactitud de nuestro contenido.

Solución:

Para ajustar el ancho, puede envolver su TextField con un Container widget, así:

Container(              
  width: 100.0,
  child: TextField()
)

No estoy muy seguro de lo que buscas cuando se trata de la altura de la TextField pero definitivamente podrías echar un vistazo a la TextStyle widget, con el que puedes manipular el fontSize y/o height

Container(              
  width: 100.0,
  child: TextField(                                 
    style: TextStyle(
      fontSize: 40.0,
      height: 2.0,
      color: Colors.black                  
    )
  )
)

Tenga en cuenta que el height en el TextStyle es un multiplicador del tamaño de fuente, según los comentarios sobre la propiedad en sí:

La altura de este intervalo de texto, como un múltiplo del tamaño de fuente.

Cuando [height] es null u omitido, la altura de la línea será determinada directamente por las métricas de la fuente, que pueden diferir de fontSize. Cuando [height] es no-nullla altura de línea del tramo de texto será un múltiplo de [fontSize] y ser exactamente fontSize * height píxeles lógicos de altura.

Por último, pero no menos importante, es posible que desee echar un vistazo a la decoration propiedad tuya TextFieldlo que te da muchas posibilidades

EDITAR: Cómo cambiar el relleno interior/margen de la TextField

Podrías jugar con el InputDecoration y el decoration propiedad de la TextField. Por ejemplo, podrías hacer algo como esto:

TextField(                                
    decoration: const InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
    )
)

Creo que quieres cambiar el relleno interior/margen de El TextField.

Puedes hacerlo agregando isDense: true y contentPadding: EdgeInsets.all(8) propiedades de la siguiente manera:

Container(
  padding: EdgeInsets.all(12),
  child: Column(
    children: [
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Default TextField',
        ),
      ),
      SizedBox(height: 16,),
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Densed TextField',
          isDense: true,                      // Added this
        ),
      ),
      SizedBox(height: 16,),
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Even Densed TextFiled',
          isDense: true,                      // Added this
          contentPadding: EdgeInsets.all(8),  // Added this
        ),
      )
    ],
  ),
)

Se mostrará como:

Captura de pantalla:

---

Widget _buildTextField() 
  final maxLines = 5;

  return Container(
    margin: EdgeInsets.all(12),
    height: maxLines * 24.0,
    child: TextField(
      maxLines: maxLines,
      decoration: InputDecoration(
        hintText: "Enter a message",
        fillColor: Colors.grey[300],
        filled: true,
      ),
    ),
  );

Comentarios y calificaciones

Te invitamos a asentar nuestra investigación fijando un comentario o dejando una puntuación te damos la bienvenida.

---

---

Utiliza Nuestro Buscador