CODEWITHSUNDEEP
flutterdart
AlexF1
AlexF1

Reputation: 385

Flutter SearchDelegate: How to remove text underline and blue line (color) below text?

Regarding Flutter Search Delegate:

How to remove text underline and blue line (color) below text?

Or

to set transparent or to change color?

I don't want to change the complete Widget with new Textfields etc. because the SearchDelegate is already good or is a finished widget.

enter image description here

My Code is within the SearchDelegate Widget of Flutter:

  @override
  ThemeData appBarTheme(BuildContext context) {
    return ThemeData(
      dividerTheme: DividerThemeData(
        color: Colors.white,
      ),
      primaryIconTheme: IconThemeData(color: Colors.white),

      scaffoldBackgroundColor: Colors.white, // for the body color
      brightness: Brightness.dark, // to get white statusbar icons
      primaryColor: glovar.getColor(farbnr), // set background color of SearchBar
      textSelectionTheme: TextSelectionThemeData(
        cursorColor: Colors.white,
      ), // cursor color

    );
  }

Upvotes: 2

Views: 1196

Answers (4)

Hadiuzzaman
Hadiuzzaman

Reputation: 464

It's a very simple solution to hide the border, just change inputDecorationTheme property like below

@override
ThemeData appBarTheme(BuildContext context) {
  return ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
      ),
    ),
  );
}

Upvotes: 0

S.Bozzoni
S.Bozzoni

Reputation: 1002

In order to eliminate the underline of the input text and the blue border in flutter 3 you have to do the following :

class MySearchDelegate extends SearchDelegate {
  MySearchDelegate()  //define the delegate constructor
      : super(
          searchFieldLabel: "input a title to search",
          keyboardType: TextInputType.text,
          textInputAction: TextInputAction.search,
          searchFieldDecorationTheme: const InputDecorationTheme(
              hintStyle: TextStyle(color: Colors.grey),
              border: InputBorder.none   //this disables the blue underline border
              ),
        );

  @override
  TextStyle? get searchFieldStyle => const TextStyle(
      decorationColor: Colors.amber,
      color: Colors.black,
      fontWeight: FontWeight.bold,
      decorationThickness: 0 //this hides the text underline
);

....

Upvotes: 0

AlexF1
AlexF1

Reputation: 385

what about this solution for the white line: "decorationThickness: 0.0000001,"

enter image description here

  @override
  ThemeData appBarTheme(BuildContext context) {
    return ThemeData(
      dividerTheme: DividerThemeData(
        color: Colors.white,
      ),
      primaryIconTheme: IconThemeData(color: Colors.white),

      inputDecorationTheme: InputDecorationTheme(
        focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red)),
      ),
      accentColor: Colors.white, // for the green line
      scaffoldBackgroundColor: Colors.white, // for the body color
      brightness: Brightness.dark, // to get white statusbar icons
      primaryColor: glovar.getColor(farbnr), // set background color of SearchBar
      textSelectionTheme: TextSelectionThemeData(
        cursorColor: Colors.white,
      ), // cursor color
      textTheme: TextTheme(
        headline6: TextStyle(
          //decoration:TextDecoration.none,
          decorationThickness: 0.0000001,
          //decorationColor: Colors.transparent, // color of text underline
        ),
      ),
    );
  }

Upvotes: 1

Colin Lazarini
Colin Lazarini

Reputation: 947

You can add a decoration to your TextField:

                decoration: InputDecoration(
                    focusedBorder: UnderlineInputBorder(
                        borderSide:
                            BorderSide(color: Color(0xFFE6C58C))), // your color

Upvotes: 2

Related Questions