[flutter] 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.

This question is related to flutter dart textfield underline hint

The answer is


I was using the TextField flutter control.I got the user typed input using below methods.

onChanged:(value){
}

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

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

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

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

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

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

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

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.

Examples related to flutter

Flutter Countdown Timer How to make an AlertDialog in Flutter? FlutterError: Unable to load asset Set the space between Elements in Row Flutter Flutter: RenderBox was not laid out Space between Column's children in Flutter How to change status bar color in Flutter? How can I add shadow to the widget in flutter? Flutter - The method was called on null Flutter- wrapping text

Examples related to dart

How to integrate Dart into a Rails app Flutter Countdown Timer How to make an AlertDialog in Flutter? Set the space between Elements in Row Flutter Flutter: RenderBox was not laid out Space between Column's children in Flutter How to change status bar color in Flutter? How can I add shadow to the widget in flutter? Flutter - The method was called on null Flutter- wrapping text

Examples related to textfield

Flutter: how to make a TextField with HintText but no Underline? How to set the height of an input (text) field in CSS? What is the recommended way to make a numeric TextField in JavaFX? HTML input field hint Best way to restrict a text field to numbers only? jQuery Set Cursor Position in Text Area

Examples related to underline

Flutter: how to make a TextField with HintText but no Underline? How to Add a Dotted Underline Beneath HTML Text Changing Underline color Removing underline with href attribute How do you underline a text in Android XML? To draw an Underline below the TextView in Android CSS Box Shadow Bottom Only Get underlined text with Markdown Remove stubborn underline from link Underline text in UIlabel

Examples related to hint

Flutter: how to make a TextField with HintText but no Underline? Android EditText view Floating Hint in Material Design OPTION (RECOMPILE) is Always Faster; Why? How do I put hint in a asp:textbox HTML input field hint Android EditText for password with android:hint Java JTextField with input hint Watermark / hint text / placeholder TextBox PHPDoc type hinting for array of objects?