SearchDelegate should respect InputDecoration theme override

[DFreds]

Internal: b/165582972

Currently, the search bar contained in SearchDelegate uses the following code to set the colors of the app:

  ThemeData appBarTheme(BuildContext context) {
    assert(context != null);
    final ThemeData theme = Theme.of(context);
    assert(theme != null);
    return theme.copyWith(
      primaryColor: Colors.white,
      primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.grey),
      primaryColorBrightness: Brightness.light,
      primaryTextTheme: theme.textTheme,
    );
  }

This requires a specific override of appBarTheme for each SearchDelegate or else it looks horrible for dark themes (even the default ThemeData.dark()). Frankly, I don't see why it needs to explicitly specify Colors.white or Colors.grey. It should inherit something from the currently applied theme just like the regular app bar.

I attached two images (light and dark) to prove my point.

[DFreds]

The style of the search text field in the _SearchPageState needs to be updated as well.

The code I'm referring to is on line 420 of search.dart.

        title: new TextField(
          controller: queryTextController,
          focusNode: widget.delegate._focusNode,
          style: theme.textTheme.title,
          onSubmitted: (String _) {
            widget.delegate.showResults(context);
          },
          decoration: new InputDecoration(
            border: InputBorder.none,
            hintText: MaterialLocalizations.of(context).searchFieldLabel,
          ),
        ),

I have the following code to override the app bar style.

 @override
 ThemeData appBarTheme(BuildContext context) {
   final ThemeData theme = Theme.of(context);
   return theme.copyWith(
     primaryColor: theme.primaryColor,
     primaryIconTheme: theme.primaryIconTheme,
     primaryColorBrightness: theme.primaryColorBrightness,
     primaryTextTheme: theme.primaryTextTheme,
   );
 }

Which makes it look like this

I'm able to update the text field with this code in my overridden method:

textTheme: theme.textTheme.copyWith(title: theme.textTheme.title.copyWith(color: theme.primaryTextTheme.title.color))

Which makes it look like this

However, the 'Search' hint text is still grey as shown

I'm unsure how to fix that part.

[goderbauer]

@DFreds I do understand the problem you describe in your second post. We need to provide a way to customize the hint text.

However, I don't understand your issue in the fist post. Overriding appBarTheme is the hook to customize the colors used in the app bar of the search screen. What are you missing from there?

[DFreds]

It isn't so much an issue as it is unexpected behavior of the search widget. I'm struggling to understand why it would default to Colors.white and Colors.grey for the primary color and primary icon theme instead of inheriting something from the theme like (almost all?) other widgets with color. I think having the override for the theme of it is great for unique customization, but I assumed that it would match the rest of my application by default when I added it.

My example pointed out dark mode. As it stands, I have to do basically zero work if I want a dark mode in my app. Obviously I can customize it, but widgets such as cards, text, icons, etc. all change to match the dark theme. The search widget does not.

Does that clear it up?

[goderbauer]

That makes sense. Thanks for the clarification.

[arieslee]

The style of the search text field in the _SearchPageState needs to be updated as well.

The code I'm referring to is on line 420 of search.dart.

        title: new TextField(
          controller: queryTextController,
          focusNode: widget.delegate._focusNode,
          style: theme.textTheme.title,
          onSubmitted: (String _) {
            widget.delegate.showResults(context);
          },
          decoration: new InputDecoration(
            border: InputBorder.none,
            hintText: MaterialLocalizations.of(context).searchFieldLabel,
          ),
        ),

I have the following code to override the app bar style.

 @override
 ThemeData appBarTheme(BuildContext context) {
   final ThemeData theme = Theme.of(context);
   return theme.copyWith(
     primaryColor: theme.primaryColor,
     primaryIconTheme: theme.primaryIconTheme,
     primaryColorBrightness: theme.primaryColorBrightness,
     primaryTextTheme: theme.primaryTextTheme,
   );
 }

Which makes it look like this

I'm able to update the text field with this code in my overridden method:

textTheme: theme.textTheme.copyWith(title: theme.textTheme.title.copyWith(color: theme.primaryTextTheme.title.color))

Which makes it look like this

However, the 'Search' hint text is still grey as shown

I'm unsure how to fix that part.

I have the same problem. Have you solved it?

[DFreds]

I did not solve it. I ended up using the default styling for now

[maxgmer]

Same issue, we need a way to customize hint color

[guojiex]

I changed the search.dart at 433 line by adding the hintstyle:

title: TextField(
            controller: queryTextController,
            focusNode: widget.delegate._focusNode,
            style: theme.textTheme.title,
            textInputAction: TextInputAction.search,
            onSubmitted: (String _) {
              widget.delegate.showResults(context);
            },
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: searchFieldLabel,
              hintStyle: theme.inputDecorationTheme.hintStyle,
            ),
          ),

Then I override the appBarTheme function (adding inputDecorationTheme):

@override
  ThemeData appBarTheme(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return theme.copyWith(
        inputDecorationTheme: InputDecorationTheme(
            hintStyle: TextStyle(color: theme.primaryTextTheme.title.color)),
        primaryColor: theme.primaryColor,
        primaryIconTheme: theme.primaryIconTheme,
        primaryColorBrightness: theme.primaryColorBrightness,
        primaryTextTheme: theme.primaryTextTheme,
        textTheme: theme.textTheme.copyWith(
            title: theme.textTheme.title
                .copyWith(color: theme.primaryTextTheme.title.color)));
  }

And the hinttext 'Search' looks like:

Without the change in search.dart, the hinttext is black on my screen:

[hyperpanthera]

Please merge @guojiex changes to stable.

[furkanvatandas]

Same problem, Is there any development?

[guojiex]

There is another way to fix this, change the line 433 in search.dart, by adding a theme wrapper for the text_field:

title: Theme(
            data: theme,
            child: TextField(
              controller: queryTextController,
              focusNode: widget.delegate._focusNode,
              style: theme.textTheme.title,
              textInputAction: TextInputAction.search,
              onSubmitted: (String _) {
                widget.delegate.showResults(context);
              },
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: searchFieldLabel,
              ),
            ),
          ),

Maybe we should add a theme wrapper for the whole Scaffold in the search.dart, line 426, but I think that will be a breaking change.
Also in this way I cannot add an effective unit test for the hint text color.

[kw2019ltd]

when fix for hint color?

[justinmc]

Closing this as #30388 was just merged and built successfully.

SearchDelegate will now respect the appBarTheme's hintStyle. Make sure you're on the master Flutter channel, or using a version > 1.7.3 once it's released.

I still think that a more comprehensive solution to this theme problem would be nice, as discussed above, but this fixes the problem for now.

[mciekurs2]

As of temporary fix for dark theme I changed line 398 in search.dart
from final ThemeData theme = widget.delegate.appBarTheme(context);
to final ThemeData theme = ThemeData.dark();.

[chitgoks]

The suggestions here work. except for the cursor color. is there a workaround for this?

[justinmc]

@chitgoks I don't see a way to set the cursor color in SearchDelegate. Can you open a separate issue for that? It would be a pretty straightforward PR if anyone is interested in opening one.

[zubisofts]

You can override the below methods in your search delegate to customize your search widget.

`class SearchWidget extends SearchDelegate {

@OverRide
String get searchFieldLabel => "Search Movie";

@OverRide
ThemeData appBarTheme(BuildContext context) {
return Theme.of(context);
}`

[aminikhil]

The style of the search text field in the _SearchPageState needs to be updated as well.

The code I'm referring to is on line 420 of search.dart.

        title: new TextField(
          controller: queryTextController,
          focusNode: widget.delegate._focusNode,
          style: theme.textTheme.title,
          onSubmitted: (String _) {
            widget.delegate.showResults(context);
          },
          decoration: new InputDecoration(
            border: InputBorder.none,
            hintText: MaterialLocalizations.of(context).searchFieldLabel,
          ),
        ),

I have the following code to override the app bar style.

 @override
 ThemeData appBarTheme(BuildContext context) {
   final ThemeData theme = Theme.of(context);
   return theme.copyWith(
     primaryColor: theme.primaryColor,
     primaryIconTheme: theme.primaryIconTheme,
     primaryColorBrightness: theme.primaryColorBrightness,
     primaryTextTheme: theme.primaryTextTheme,
   );
 }

Which makes it look like this

I'm able to update the text field with this code in my overridden method:

textTheme: theme.textTheme.copyWith(title: theme.textTheme.title.copyWith(color: theme.primaryTextTheme.title.color))

Which makes it look like this

However, the 'Search' hint text is still grey as shown

I'm unsure how to fix that part.

You can simply add this in theme.copyWith()

inputDecorationTheme: theme.inputDecorationTheme.copyWith(
hintStyle: theme.textTheme.title.copyWith(
color: Colors.white70,
fontWeight: FontWeight.w400,
),
),

[king-11]

The style of the search text field in the _SearchPageState needs to be updated as well.
The code I'm referring to is on line 420 of search.dart.

        title: new TextField(
          controller: queryTextController,
          focusNode: widget.delegate._focusNode,
          style: theme.textTheme.title,
          onSubmitted: (String _) {
            widget.delegate.showResults(context);
          },
          decoration: new InputDecoration(
            border: InputBorder.none,
            hintText: MaterialLocalizations.of(context).searchFieldLabel,
          ),
        ),

I have the following code to override the app bar style.

 @override
 ThemeData appBarTheme(BuildContext context) {
   final ThemeData theme = Theme.of(context);
   return theme.copyWith(
     primaryColor: theme.primaryColor,
     primaryIconTheme: theme.primaryIconTheme,
     primaryColorBrightness: theme.primaryColorBrightness,
     primaryTextTheme: theme.primaryTextTheme,
   );
 }

Which makes it look like this

I'm able to update the text field with this code in my overridden method:
textTheme: theme.textTheme.copyWith(title: theme.textTheme.title.copyWith(color: theme.primaryTextTheme.title.color))
Which makes it look like this

However, the 'Search' hint text is still grey as shown

I'm unsure how to fix that part.

You can simply add this in theme.copyWith()

inputDecorationTheme: theme.inputDecorationTheme.copyWith(
hintStyle: theme.textTheme.title.copyWith(
color: Colors.white70,
fontWeight: FontWeight.w400,
),
),

title has been deprecated using subtitle1 is a better alternate.

[charleshan]

It looks like we can't override InputDecoration as shown in the source code:

    // material/search.dart
    ...
    return Semantics(
      explicitChildNodes: true,
      scopesRoute: true,
      namesRoute: true,
      label: routeName,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: theme.primaryColor,
          iconTheme: theme.primaryIconTheme,
          textTheme: theme.primaryTextTheme,
          brightness: theme.primaryColorBrightness,
          leading: widget.delegate.buildLeading(context),
          title: TextField(
            controller: widget.delegate._queryTextController,
            focusNode: focusNode,
            style: theme.textTheme.headline6,
            textInputAction: widget.delegate.textInputAction,
            keyboardType: widget.delegate.keyboardType,
            onSubmitted: (String _) {
              widget.delegate.showResults(context);
            },
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: searchFieldLabel,
              hintStyle: searchFieldStyle,
            ),
          ),
          actions: widget.delegate.buildActions(context),
        ),
        body: AnimatedSwitcher(
          duration: const Duration(milliseconds: 300),
          child: body,
        ),
      ),
    );
    ...

[mehmetf]

This issue is quite old at this point and is too generic IMO. I am refocusing it to be primarily about InputDecoration theme which remains an issue also raised by several internal teams. Marking as p3 for now.

[GuvanchBayryyyev]

I have found the solution !!!

1. Remove building Widget

  Widget buildLeading(BuildContext context) { 
// TODO: implement buildLeading 
       return Container( 
      height: 0,  
        );  
      } 

2. You need to override buildActions to put custom Input

  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    return [
      Expanded(flex: 1),
      Expanded(flex: 7),
      Expanded(flex: 2),
    ];
  }

1. First Expanded Widget is "Back button"
2. Second Expanded Widget is "TextFormField", then you can override decoration: InputDecoration....
3. Third Expanded Widget is clearing textformfield input

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.