Flutter : comment modifier la hauteur et la largeur du TextField ?

Avec Flutter, vous ne pouvez concentrer que sur un seul code pour votre application. Le framework va ensuite le traduire en code pouvant être utilisé à la fois par les systèmes d'exploitation mobile iOS et Android. Flutter utilise le langage Dart et fonctionne avec un système de widgets que l'on agence afin de créer l'interface comme on le souhaite. Le widget "TextField" est utilisé pour afficher un champ de saisie de texte. Avec l'aide d'autres classes, on peut modifier sa largeur et sa hauteur.

Pour modifier la largeur d'un widget de la classe "TextField", vous pouvez le placer dans un container. C'est en modifiant la taille de ce container que la largeur du TextField va s'adapter, afin de prendre toute la place.

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

Pour modifier la hauteur, vous devez utiliser l'attribut "style" du widget. Il permet de modifier l'affichage. La classe "TextStyle" permet d'adapter l'affichage. La hauteur d'un champ de texte est principalement liée à sa taille de police. Plus vous augmentez la taille de la police, plus le champ va être grand. L'attribut "height" existe comme avec d'autres widgets, mais sa valeur est différente. Il s'agit d'un coefficient qui multiplie la taille de la police.

// La hauteur du champ de texte sera de 2 * 12 = 24 pixels
Container(
  width: 100.0,
  child: TextField( 
    style: TextStyle(
      fontSize: 12.0,
      height: 2.0,
    )
  )
)

Vous pouvez également paramétrer des marges internes pour que le texte soit éloigné des bords du champ. Cela va augmenter la hauteur ou la largeur du widget. Vous devez pour cela utiliser l'attribut "decoration". La classe "InputDecoration" fournit des éléments pour modifier l'affichage des champs de formulaire.

TextField(                                
    decoration: const InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 20.0, horizontal:20.0),
    )
)
Autour du même sujet

Android