LabelTextfieldWidget in Flutter

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

Getting Started

Our final code will be:

Image for post
Image for post
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:

Image for post
Image for post

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:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store