LabelTextfieldWidget in Flutter

Trong Dinh Thai Hoang
1 min readJul 17, 2019


Basically, the top text will show hint text if user input otherwise it shows nothing.

Getting Started

Our final code will be:

Sample app


  1. Imagine parameters you want your users to control it.
  2. Create Stack layout with 2 widgets: Text and TextField.
  3. Listen to events such as onTap onChanged onEditingComplete and focusNodein order to update the top message.

Let’s code

1. Parameters:


2. Create UI:

isShowHintText is used to refresh UI

3. Listen to events:

  • Add FocusNode and TextEditingController to TextField
  • Implement events:
  • Final code:

For viewing the complete code go to:



Trong Dinh Thai Hoang

I’m a peaceful person who wants to make friend with people around the world.