How to make a TextField with HintText but no Underline

Question

This is what I'm trying to make:

In the Flutter docs for Text Fields (https://flutter.io/text-input/) it says you can remove the underline by passing null to the decoration. However, that also gets rid of the hint text.

I do not want any underline whether the text field is focused or not.

Answer 1

You can achieve this by using the InputDecoration class to customize the appearance of your TextField. Here's an example:

TextField(
  decoration: InputDecoration(
    hintText: "Enter your text here",
    border: InputBorder.none,
    focusedBorder: InputBorder.none,
    enabledBorder: InputBorder.none,
    errorBorder: InputBorder.none,
    disabledBorder: InputBorder.none,
  ),
);
 

By setting all the borders to InputBorder.none, you can remove the underline from your TextField. The hintText will still be visible as expected.