Search code examples
flutterdarttextfieldunderlinehint

Flutter: how to make a TextField with HintText but no Underline?


This is what I'm trying to make:

enter image description here

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.

UPDATE: updated accepted answer to reflect changes in Flutter SDK as of April 2020.


Solution

  • Do it like this:

    TextField(
      decoration: new InputDecoration.collapsed(
        hintText: 'Username'
      ),
    ),
    

    or if you need other stuff like icon, set the border with InputBorder.none

    InputDecoration(
        border: InputBorder.none,
        hintText: 'Username',
      ),
    ),