Comment modifier la hauteur et la largeur d'un champ de texte ?

Question

Comment personnaliser TextField 's width y height ?

Answer 1

Pour ajuster la largeur, vous pourriez envelopper votre TextField avec un Container widget, comme ça :

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

Je ne suis pas vraiment sûr de ce que vous cherchez quand il s'agit de la hauteur du TextField mais vous pourriez certainement jeter un coup d'oeil à la TextStyle avec lequel vous pouvez manipuler les éléments suivants fontSize et/ou height

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

N'oubliez pas que le height dans le TextStyle est un multiplicateur de la taille de la police, conformément aux commentaires sur la propriété elle-même :

La hauteur de cette zone de texte, en tant que multiple de la taille de la police.

Lorsque [height] est nul ou omis, la hauteur de la ligne sera déterminée par les métriques de la police directement, qui peuvent différer de fontSize. Lorsque [height] n'est pas nul, la hauteur de ligne de l'empan de texte sera un multiple de [fontSize] et sera exactement de fontSize * height pixels logiques grands.

Enfin, vous pouvez aussi jeter un coup d'œil à la page d'accueil du site Web de la Commission européenne. decoration propriété de vous TextField ce qui vous donne beaucoup de possibilités

EDITAR: Comment modifier l'espacement/la marge interne de l'écran d'accueil ? TextField

Vous pouvez jouer avec le InputDecoration et le decoration de l TextField . Par exemple, vous pourriez faire quelque chose comme ceci :

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

Answer 2

Je pense que vous voulez changer le rembourrage/marge interne de la TextField .

Vous pouvez le faire en ajoutant isDense: true y contentPadding: EdgeInsets.all(8) comme suit :

Container(
  padding: EdgeInsets.all(12),
  child: Column(
    children: <Widget>[
      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
        ),
      )
    ],
  ),
)

Il sera affiché comme :

Answer 3

Capture d'écran :

---

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,
      ),
    ),
  );
}

Answer 4

Cette réponse fonctionne, mais il y aura des conflits lorsque le champ de saisie est en état d'erreur. Pour une meilleure approche et un meilleur contrôle, vous pouvez utiliser ceci.

InputDecoration(
    isCollapsed: true,
    contentPadding: EdgeInsets.all(9),
)

Answer 5

Enveloppe TextField sur SizedBox pour la largeur

SizedBox(
  height: 40,
  width: 150,
  child: TextField(),
)