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

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


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.