web-dev-qa-db-fra.com

TextField avec astuce / étiquette animée

Je veux implémenter un formulaire contenant TextFields. Chaque champ a une étiquette/un indice. Je veux que l'indication s'anime et devienne une étiquette lorsque l'utilisateur commence à taper. Il s'agit d'un modèle de conception de matériau standard, je m'attendais donc à ce qu'il soit implémenté par les widgets standard.

Quelque chose comme ça: enter image description here

flutterflutter-layoutflutter-animation
10
Frank Harper

Cela s'avère très simple.

InputDecoration a un paramètre labelText, qui fait ce que je voulais.

Par exemple.

TextField(decoration: InputDecoration(labelText: 'Full name')),
12
Frank Harper

Dans Flutter, l'indice et l'étiquette se comportent de deux manières différentes qui hintText sera affiché comme fixe mais le labelText sera (double effet) affiché comme indice qui s'anime pour le haut lorsque le curseur se concentre.

TextField(decoration: InputDecoration(
                          labelText: "Animatable hint",
                           hintText: "Inanimate hint")
                      )
)
4
Deva