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][1]][1]

[1]:

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

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][1]

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][2].

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


[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

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

[![hinttext vs labeltext][1]][1]


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][2]


[1]:

[2]:

[To see links please register here]