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

Question

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.

score 467 · Accepted Answer · edited Mar 03 '19 at 14:14

467

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

edited Mar 03 '19 at 14:14

User

31,811
40
131
232

answered Mar 01 '18 at 15:38

Made Baruna

6,080
3
16
11

1

Is it possible to do it without importing the `material` package? i.e. for `Cupertino` theme? – kosiara - Bartosz Kosarzycki Mar 11 '19 at 06:38
I'd like avoid: `InputDecoration' can't be assigned to the parameter type 'BoxDecoration'` type error – kosiara - Bartosz Kosarzycki Mar 11 '19 at 06:45
'This feature was deprecated after v1.13.2.' in docs – reverie_ss Nov 05 '20 at 12:16
Can we please mark this as the real solution? It is officially used in Flutter 2.2.0 – Rebar May 29 '21 at 23:20

score 318 · Answer 2 · edited Oct 26 '22 at 20:28

318

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

edited Oct 26 '22 at 20:28

Philippe Fanaro

6,148
6
38
76

answered Nov 02 '19 at 06:53

sourav pandit

8,647
2
19
17

How can I give a radius after applying this solution? – Jay Tillu Aug 25 '21 at 10:23
1

@JayTillu This video demonstrates it quite well: https://youtu.be/3zddqfn0dfc – Christian Aug 30 '21 at 17:56
1

Or u can just simly use one and only `border: InputBorder.none` to turn off all kinds of borders (i.e. `focusedBorder`, `enabledBorder`, `errorBorder`, `disabledBorder`). – Son Nguyen Sep 27 '21 at 10:06
using this will give you 100 % border less even for TextFormField. and you can style you component or make stateless widget component its up-to you – sourav pandit Oct 05 '21 at 04:06

score 57 · Answer 3 · edited Apr 03 '20 at 06:26

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.

score 32 · Answer 4 · answered Apr 26 '20 at 15:01

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

score 22 · Answer 5 · answered Jul 13 '19 at 14:11

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

score 5 · Answer 6 · answered Apr 29 '22 at 13:30

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:

score 4 · Answer 7 · edited Mar 08 '23 at 13:54

4

To remove TextField underline border in Flutter, you can simply set border to InputBorder.none.

TextField(
  decoration: InputDecoration(
    hintText: 'Hint Text',
    border: InputBorder.none,
  ),
)

edited Mar 08 '23 at 13:54

Saad

539
2
19

answered Nov 21 '22 at 05:16

Fakhriddin Abdullaev

4,169
2
35
37

score 3 · Answer 8 · edited Mar 28 '21 at 07:03

3

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

edited Mar 28 '21 at 07:03

gurkan

884
4
16
25

answered Mar 27 '21 at 13:22

U Anil

49
4

Mohammad Ali Shuvo · Answer 9 · 2021-02-18T17:29:30.757

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

score 1 · Answer 10 · answered Dec 28 '22 at 18:23

Default

 Container(
      padding: const EdgeInsets.all(20),
      child: const TextField(
        decoration: InputDecoration(
            border: UnderlineInputBorder(), hintText: "Search Your tips"),
      ),
    ),

Outline Border

 Container(
      padding: const EdgeInsets.all(20),
      child: TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(40),
          ),
          hintText: "Search Your tips",
        ),
      ),
    ),

No Border

 Container(
      padding: const EdgeInsets.all(20),
      child: const TextField(
        decoration: InputDecoration(
            border: InputBorder.none, hintText: "Search Your tips"),
      ),
    ),

score 1 · Answer 11 · answered Jan 20 '23 at 07:47

Try the following code:

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(30.0)),
    hintText: "Search your trips",
    hintStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w300),
    filled: true,
    fillColor: Colors.cyan[200],
    suffixIcon: IconButton(
      onPressed: () {},
      icon: const Icon(Icons.search, color: Colors.white),
    ),
  ),
),

score 0 · Answer 12 · edited Jul 05 '20 at 15:36

0

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

edited Jul 05 '20 at 15:36

jizhihaoSAMA

12,336
9
27
49

answered Jul 05 '20 at 15:04

S.R Keshav

1,965
1
11
14

What's the difference between this answer and [@E. Sun's answer](https://stackoverflow.com/a/61442959/3025856) from a month ago? – Jeremy Caney Jul 05 '20 at 21:13
You want something new? – S.R Keshav Jul 06 '20 at 00:54
6

If an answer has already been provided, there's no need to submit it again. Doing so only adds noise for future readers, as they need to sort through multiple similar answers. In the future, once you've gained a bit more reputation, you'll be able to upvote existing answers; that's the preferred way of validating an approach and affirming that the solution works. – Jeremy Caney Jul 06 '20 at 00:57
5

I should note that, on occasion, contributors will _still_ post a similar advice if they have a different way of explaining it, or want to add considerable more detail. That's totally fine. The issue here is that you seem to be providing the _same_ answer, but with _less_ detail, so it doesn't contribute much to the thread. – Jeremy Caney Jul 06 '20 at 00:59

score 0 · Answer 13 · answered Sep 28 '22 at 04:45

0

To remove underline border: InputBorder.none,

For hint use hintText: 'Hint Text'

   TextFormField(
      InputDecoration(
        border: InputBorder.none,
        hintText: 'Hint Text',
      ),
    ),

answered Sep 28 '22 at 04:45

Anand

4,355
2
35
45

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

13 Answers13

Default

Outline Border

No Border

Linked