How to remove underline below TextField?

flutter dart textfield
Rahul Lohra picture Rahul Lohra · May 26, 2019 · Viewed 11.2k times · Source

Here is the code. I want to remove the black underline just below text, and currently the TextField is in edit mode:

TextField(
      autofocus: true,
      decoration: InputDecoration.collapsed(
        hintText: "Search",
        border: InputBorder.none,
      ),
      maxLines: 1,
    )

Answer

Ali Türkay Avci picture Ali Türkay Avci · Jan 28, 2020

Try to give a TextStyle to your TextField widget. Your TextField is getting your default Theme's TextStyle.

TextField(
      autofocus: true,
      style: TextStyle(color: Colors.white, fontSize: 30),
      decoration: InputDecoration.collapsed(
        hintText: "Search",
        border: InputBorder.none,
      ),
      maxLines: 1,
    )

In TextField widgets source code it states:

  /// If null, defaults to the `subhead` text style from the current [Theme].
  final TextStyle style;

Related questions

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. …

Read More
Disable a text edit field in flutter

I need to disable TextFormField occasionally. I couldn't find a flag in the widget, or the controller to simply make it read-only or disable. What is the best way to do it?

Read More
Flutter: Outline input border

I was trying to build a border for my text field like: return TextField( ... border: OutlineInputBorder( borderSide: BorderSide( color: Colors.red, width: 5.0), ) ) ) But it always return a black border with 1.0 as width. The only way that I found to change …

Read More