SearchDelegate should respect InputDecoration theme override

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.

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.

@DFreds

@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?

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?

That makes sense. Thanks for the clarification.

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?

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

Same issue, we need a way to customize hint color

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:

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

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

@chitgoks

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

@OverRide

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

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

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.

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

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.

I have found the solution !!!

Remove building Widget

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

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

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

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.

Navigation Menu

Repository navigation

SearchDelegate should respect InputDecoration theme override #19734

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SearchDelegate should respect InputDecoration theme override #19734

Description

Activity

DFreds commented on Jul 25, 2018

goderbauer commented on Aug 14, 2018

DFreds commented on Aug 15, 2018

goderbauer commented on Aug 15, 2018

arieslee commented on Dec 3, 2018

DFreds commented on Dec 4, 2018

maxgmer commented on Jan 13, 2019

guojiex commented on Jan 17, 2019

6 remaining items

mciekurs2 commented on Jun 18, 2019

chitgoks commented on Jan 2, 2020

justinmc commented on Jan 14, 2020

zubisofts commented on Feb 6, 2020

aminikhil commented on May 26, 2020

king-11 commented on May 27, 2020

charleshan commented on Aug 1, 2020

mehmetf commented on Aug 31, 2020

GuvanchBayryyyev commented on Nov 23, 2020

github-actions commented on Aug 9, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions