TextField with animated hint / label

flutter flutter-layout flutter-animation
Frank Harper picture Frank Harper · Sep 24, 2018 · Viewed 14.5k times · Source

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

Answer

Frank Harper picture Frank Harper · Sep 24, 2018

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

Related questions

Programmatically scrolling to the end of a ListView

I have a scrollable ListView where the number of items can change dynamically. Whenever a new item is added to the end of the list, I would like to programmatically scroll the ListView to the end. (e.g., something like …

Read More
Horizontally scrollable cards with Snap effect in flutter

I want to create a list of cards scrolling horizontally with snap to fit effect when swiped either from left or right. Each card has some spacing between them and fit to screen similar to below image Apart from that …

Read More
How to add asset image in app bar as an action icon in Flutter application?

Problem I am trying to add a logout image icon in appbar of flutter screen. I have created a asset folder and created directories images/icons/ and placed icons in them. I have mentioned them in pubspec.yaml file. I …

Read More