CODEWITHSUNDEEP
flutterdarttextfieldunderlinehint
juan park
juan park

Reputation: 3454

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.

Upvotes: 334

Views: 415505

Answers (13)

Areeb Momin
Areeb Momin

Reputation: 447

I removed the border for every case in TextField

Code:

        TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            errorBorder: InputBorder.none,
            focusedErrorBorder: InputBorder.none,
            disabledBorder: InputBorder.none,
            enabledBorder: InputBorder.none,
            hintText: 'Senders name',
          ),
        ),

Output:

TextField without borders

Upvotes: 2

Fakhriddin Abdullaev
Fakhriddin Abdullaev

Reputation: 4900

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

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

Upvotes: 12

My Car
My Car

Reputation: 4556

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

Upvotes: 2

krishnaacharyaa
krishnaacharyaa

Reputation: 24892

Default

enter image description here

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

Outline Border

enter image description here

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

No Border

enter image description here

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

Upvotes: 1

sourav pandit
sourav pandit

Reputation: 9105

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

Upvotes: 327

Anandh Krishnan
Anandh Krishnan

Reputation: 5986

To remove underline border: InputBorder.none,

For hint use hintText: 'Hint Text'

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

Upvotes: 0

Syed Mahfuzur Rahman
Syed Mahfuzur Rahman

Reputation: 467

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: Normally Looks like this

While having input error: On error

While user input: while entering data

Upvotes: 5

U Anil
U Anil

Reputation: 79

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

Upvotes: 6

Mohammad Ali Shuvo
Mohammad Ali Shuvo

Reputation: 55

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

Upvotes: 1

E. Sun
E. Sun

Reputation: 1344

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

Upvotes: 35

Suragch
Suragch

Reputation: 511538

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.

Upvotes: 59

Sarthak Singhal
Sarthak Singhal

Reputation: 1225

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

Upvotes: 22

Made Baruna
Made Baruna

Reputation: 6679

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

Upvotes: 509

Related Questions