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.


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',
  ),
),

new flutter sdk since after integration of web and desktop support you need to specify individually like this

TextFormField(
    cursorColor: Colors.black,
    keyboardType: inputType,
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        contentPadding:
            EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
        hintText: "Hint here"),
  )

Here is a supplemental answer that shows some fuller code:

enter image description here

  Container(
    decoration: BoxDecoration(
      color: Colors.tealAccent,
      borderRadius:  BorderRadius.circular(32),
    ),
    child: TextField(
      decoration: InputDecoration(
        hintStyle: TextStyle(fontSize: 17),
        hintText: 'Search your trips',
        suffixIcon: Icon(Icons.search),
        border: InputBorder.none,
        contentPadding: EdgeInsets.all(20),
      ),
    ),
  ),

Notes:

  • The dark background (code not shown) is Colors.teal.
  • InputDecoration also has a filled and fillColor property, but I couldn't get them to have a corner radius, so I used a container instead.

I found no other answer gives a border radius, you can simply do it like this, no nested Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );