I want to implement a form containing TextFields. Each field has a label / hint. I want the hint to animate and become a label when the user starts typing. This is a standard Material design pattern, so I expected it to be implemented by the standard Widgets.
Something like this:
It turns out to be very simple.
InputDecoration
has a labelText parameter, which does what I wanted.
E.g.
TextField(decoration: InputDecoration(labelText: 'Full name')),
In Flutter, both hint and label are behaving in two different way that hintText will be shown as fixed but the labelText will be(double acting) shown as hint which is animating to the top when the cursor is getting focused.
TextField(decoration: InputDecoration
(
labelText: "Animatable hint",
hintText: "Inanimate hint"
)
)
Difference between labelText and HintText.
labelText : Shows label top of the input field, if it's empty or unfocused. When it get focus, labelText moves to above the input field.
hintText: just shows hint to the user.
TextField(decoration: InputDecoration(labelText: 'labelText'),),
TextField(decoration: InputDecoration(hintText: 'hintText'),),
TextField(decoration:InputDecoration(hintText: 'both', labelText: 'both'),),
more information - TextFormField placeholder
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With