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

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.

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

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

Here is a supplemental answer that shows some fuller code:

  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.

Solution 4:^[4]

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

Solution 5:^[5]

change the focused border to none

TextField(
      decoration: new InputDecoration(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
          hintText: 'Subject'
      ),
    ),

Solution 6:^[6]

TextField widget has a property decoration which has a sub property border: InputBorder.none.This property would Remove TextField Text Input Bottom Underline in Flutter app. So you can set the border property of the decoration of the TextField to InputBorder.none, see here for an example:

border: InputBorder.none : Hide bottom underline from Text Input widget.

 Container(
        width: 280,
        padding: EdgeInsets.all(8.0),
        child : TextField(
                autocorrect: true,
                decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Enter Some Text Here')
            )
    )

Solution 7:^[7]

You can use TextFormField widget of Flutter Form as your requirement.

TextFormField(
     maxLines: 1,
     decoration: InputDecoration(
          prefixIcon: const Icon(
              Icons.search,
              color: Colors.grey,
          ),
      hintText: 'Search your trips',
      border: OutlineInputBorder(
         borderRadius: BorderRadius.all(Radius.circular(10.0)),
      ),
    ),
 ),

Solution 8:^[8]

To make a Borderless TextFormField i found below solution:

It is without using container.

TextFormField(
      decoration: InputDecoration(
          border: OutlineInputBorder(
                         borderRadius: BorderRadius.circular(15.0),
                         borderSide: BorderSide.none,
                            ),

           labelText: "Student email/id",
           floatingLabelStyle: const TextStyle(
                                    height: 4,
                                    color: Color.fromARGB(255, 160, 26, 179)),
                                
           filled: true,
           fillColor: Colors.grey[200],
           prefixIcon: const Icon(Icons.person),
                ),
           ),

Sample Normally:

While having input error:

While user input:

Solution 9:^[9]

            Container(
         height: 50,
          // margin: EdgeInsets.only(top: 20),
          decoration: BoxDecoration(
              color: Colors.tealAccent,
              borderRadius: BorderRadius.circular(32)),
          child: TextFormField(
            cursorColor: Colors.black,
            // keyboardType: TextInputType.,
            decoration: InputDecoration(
              hintStyle: TextStyle(fontSize: 17),
              hintText: 'Search your trips',
              suffixIcon: Icon(Icons.search),
              border: InputBorder.none,
              contentPadding: EdgeInsets.all(18),
            ),
          ),
        ),

Solution 10:^[10]

TextField(style: TextStyle(color: Colors.black45,fontSize: 18,decorationThickness: 0.0)).
It's showing without underline with decorationThickness:0.0.

Solution 11:^[11]

decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	User
Solution 2
Solution 3	Yushin
Solution 4	E. Sun
Solution 5	Sarthak Singhal
Solution 6	Paresh Mangukiya
Solution 7	Dhrumil Shah
Solution 8	Mahfuzur Rahman
Solution 9
Solution 10	gurkan
Solution 11	jizhihaoSAMA

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]