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

Question

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.

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

    );
  }

Does this answer your question? [Flutter: how to make a TextField with HintText but no Underline?](https://stackoverflow.com/questions/49040679/flutter-how-to-make-a-textfield-with-hinttext-but-no-underline) — Tirth Patel, Jul 27 '21 at 13:56
code above, some answers below. i don't want to change the complete widget, so the answer above is not really a solution but also a workaround (like i see) — AlexF1, Jul 27 '21 at 19:06

score 3 · Accepted Answer · answered Jul 27 '21 at 13:54

3

You can add a decoration to your TextField:

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

answered Jul 27 '21 at 13:54

Colin Lazarini

754
4
14

helped with the blue line. thank you very much. for the white line one workaround below – AlexF1 Jul 27 '21 at 19:02

AlexF1 · Answer 2 · 2021-07-27T19:14:14.170

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

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

S.Bozzoni · Answer 3 · 2023-08-13T14:13:00.113

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

....

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

3 Answers3

Linked