Remove TextField Underline/Border in Flutter | Easy Way

TextField is a very common widget in Flutter. You may be using a lot or just a few in your app. While working with the TextField widget in your Flutter app, you may want to hide the underline i.e a border displayed at the bottom of the TextField. So in this tutorial, we learn a quick and easy way to remove TextField underline/border in Flutter.

Here’s what we’ll cover:

• Steps to Remove TextField Underline/Border in Flutter
• Removing the Underline/Border only when Focused
• Disabling Underline/Border only when Enabled
• Remove Underline/Border when Disabled
• Hiding Underline/Border on Error

Steps to Remove TextField Underline/Border in Flutter

To remove TextField underline/border in Flutter, you can simply set the border property to InputBorder.none. This will remove the underline for all states such as Focused, Enabled, Error, Disabled.

Here are the steps:

Step1: Inside the TextField widget, make sure you have already added the decoration property with InputDecoration assigned.

Step 2: Inside the InputDecoration, add the border property and set it to InputBorder.none.

Step 3: Run the app.

Code Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    border: InputBorder.none,
  ),
)

Output:

Note: To close the keyboard on touching outside of TextField, find easy instructions here.

Looking to create a polished, professional-looking form in your Flutter app? Don’t miss our guide on setting the height of your text fields! By customizing the height of your text fields, you’ll be able to create a form that is both user-friendly and aesthetically pleasing.

Removing the Underline/Border only when Focused

You may have a special case to hide Underline/Border only when TextField is in focus. 

To do so:

• Inside the InputDecoration, add the focusedBorder property and set it to InputBorder.none.
• Run the app.

Code Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    focusedBorder: InputBorder.none,
  ),
)

Output:

Disabling Underline/Border only when Enabled

Sometimes you may just want to hide the Underline when the TextField is shown and keep displaying the underline when the TextField is in Focus.

To do that:

• Inside the InputDecoration, add the enabledBorder property and set it to InputBorder.none.
• Run the app.

Code Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    enabledBorder: InputBorder.none,
  ),
)

Output:

Looking for ways to customize your Flutter TextField beyond just removing the underline or border? Check out our blog post on how to set initial values for your TextField for an even more personalized user experience!

Remove Underline/Border when Disabled

Sometimes you may lock the TextField by disabling it. At the same time, you may also want to remove the TextField underline so that it looks just like a Text widget in reading mode.

To do that:

• Inside the InputDecoration, add the disabledBorder property and set it to InputBorder.none.
• Run the app.

Code Example:

TextField(
  enabled: false,
  decoration: InputDecoration(
    labelText: 'David Jhon',
    disabledBorder: InputBorder.none,
  ),
)

Hiding Underline/Border on Error

To hide the border when TextField is having an error:

• Inside the InputDecoration, add the errorBorder property and set it to InputBorder.none.
• Run the app.

Code Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Name',
    errorBorder: InputBorder.none,
  ),
)

That’s it. Thanks!

Conclusion

In this tutorial, we learned an easy way to remove TextField underline/border in Flutter with a practical example. We also saw how to hide the border of the TextField in states such as Focused, Enabled, Error, Disabled.