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.
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:
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 afilled
andfillColor
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),
),
),
);