Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextField with animated hint / label

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: enter image description here

like image 578
Frank Harper Avatar asked Sep 24 '18 21:09

Frank Harper


3 Answers

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')),
like image 105
Frank Harper Avatar answered Oct 05 '22 17:10

Frank Harper


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"
          )
)
like image 28
Deva Avatar answered Oct 05 '22 18:10

Deva


hinttext vs labeltext

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

like image 7
Athira Reddy Avatar answered Oct 05 '22 16:10

Athira Reddy