TextField with animated hint / label

Question

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:

score 59 · Answer 1 · edited Jun 16 '19 at 12:13

59

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')),

edited Jun 16 '19 at 12:13

HTMHell

5,761
5
37
79

answered Sep 24 '18 at 21:45

Frank Harper

3,027
3
30
41

score 28 · Answer 2 · edited Oct 02 '20 at 05:27

28

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"
          )
)

edited Oct 02 '20 at 05:27

Sandesh Baliga

579
5
20

answered Dec 22 '18 at 19:40

Deva

2,386
1
16
16

2

I didn't know that label is animatable and hint isn't. +1 – Mibac Jun 30 '19 at 14:06

score 13 · Answer 3 · answered May 26 '21 at 05:44

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

score 4 · Answer 4 · edited Jun 20 '20 at 09:12

Also it's a good way to make your own Method or widget.(So you can reuse code later)

Example:

//your generator method or you can make your own widget class if you want that.
  Widget _entryField(String title, {bool isPassword = false}) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
          ),
          SizedBox(
            height: 10,
          ),
          TextField(
              obscureText: isPassword,
              decoration: InputDecoration(
                //labelText: title ,  // you can change this with the top text  like you want
                hintText: "Please enter your $title" ,
                  border: InputBorder.none,
                  fillColor: Color(0xfff3f3f4),
                  filled: true))
        ],
      ),
    );
  }

==============

Edit:

As mentioned by @Evin1_ below. After reading this article Splitting widgets to methods is a performance antipattern/Iiro Krankka

I found it's better to use StatelessWidget to split your code and functions only for doing Operations.

the reason: This way, you won’t be rebuilding your static widget trees multiple times for nothing but wasted CPU cycles.

If you really prefer building your widget trees with methods, you might want to take a look at a package called functional_widget by Remi Rousselet.

Also others comments for more information about this topic here difference between functions and classes to create reusable widgets

This is a nice suggestion, I'd just add we should advocate against using methods to build widgets based on https://stackoverflow.com/questions/53234825/what-is-the-difference-between-functions-and-classes-to-create-reusable-widgets and https://iiro.dev/2018/12/11/splitting-widgets-to-methods-performance-antipattern/ — Evin1_, Jun 14 '20 at 23:55

TextField with animated hint / label

4 Answers4

Edit: