En manipulant du champ TextFormField dans Flutter auquel vous appliquez du multiligne, vous vous rendrez vite compte que le comportement du LabelText n’est pas optimal puisqu’il est centré verticalement comme ceci :
Perso, un truc comme ça mal posé, ça me mets en PLS directement. Fort heureusement ça se règle.
Comment aligner le labelText en haut à gauche d’un TextFormField ?
Eh bien facilement en fait. Juste une pauvre ligne.
Pour positionner le labelText en haut à gauche dans un TextFormField contenant plusieurs lignes, vous devez définir l’attribut alignLabelWithHint sur true dans le InputDecoration. Cette option aligne le label au haut de l’input lorsque l’hintText est présent et que l’input est vide.
Voici comment vous pouvez l’utiliser :
TextFormField(
decoration: InputDecoration(
labelText: 'Détails',
alignLabelWithHint: true,
border: OutlineInputBorder(),
),
maxLines: 3,
validator: (value) {
if (value.isEmpty) {
return 'Veuillez entrer les détails de votre réclamation';
}
return null;
},
)Cette option positionnera le labelText en haut à gauche de votre TextFormField, ce qui est particulièrement utile lorsque vous avez un TextFormField qui peut contenir plusieurs lignes de texte.
Et voilà le résultat :
Tout simple…
