web-dev-qa-db-fra.com

Comment mettre à jour la hauteur et la largeur de flutter TextField?

Comment personnaliser la hauteur et la largeur de la mise en page TextField dans Flutter?

flutterflutter-layout
20
Aravinth thiyagarajan

Pour ajuster la largeur, vous pouvez envelopper votre TextField avec un widget Container, comme suit:

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

Je ne suis pas vraiment sûr de ce que vous cherchez quand il s'agit de la hauteur de la TextField mais vous pouvez certainement jeter un coup d'œil au widget TextStyle, avec lequel vous pouvez manipuler la fontSize et/ou height

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

Notez que la height de la TextStyle est un multiplicateur de la taille de la police, comme indiqué dans les commentaires sur la propriété elle-même:

La hauteur de ce texte est un multiple de la taille de la police.

Si elle est appliquée à la racine [TextSpan], cette valeur définit la hauteur de ligne, qui correspond à la distance minimale entre les lignes de base du texte ultérieur, sous forme de multiple de la taille de la police.

Enfin, vous voudrez peut-être jeter un coup d’œil à la propriété decoration de vous TextField, ce qui vous donne beaucoup de possibilités.

EDIT: Comment changer la marge de remplissage/la marge intérieure de la TextField

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

new TextField(                                
    decoration: const InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
    )
)
29
Mikolaj Kieres

Vous pouvez essayer la propriété margin dans le conteneur. Enveloppez le champ de texte à l'intérieur d'un conteneur et ajustez la propriété margin.

                      new Container(
                      margin: const EdgeInsets.only(right: 10, left: 10),
                      child: new TextField(

                        decoration: new InputDecoration(
                            hintText: 'username',
                            icon: new Icon(Icons.person)),
                      )),
1
shahana kareen