Flutter - how to change textcolor in search delegate class?

Question

I managed to change the hintStyle-color

@override
ThemeData appBarTheme(BuildContext context) {
  return ThemeData(
    primaryColor: kPrimaryColor,
    primaryIconTheme: IconThemeData(
      color: Colors.white,
    ),
    inputDecorationTheme: InputDecorationTheme(
      hintStyle:
        Theme.of(context).textTheme.title.copyWith(color: Colors.white),
    ),
  );
}

But if i type something into the appbar searchfield, the color is still black...

How can I properly change the textcolor in the SearchDelegate class?

I tried to add `textTheme: TextTheme(display2: TextStyle(color: Colors.white)),`, but it din't work. Or did you mean something else @dev-aentgs? — Matthias, Jun 11 '20 at 11:06
Try to follow this https://stackoverflow.com/questions/56277722/flutter-serachdelegate-modify-hint-text-color-and-textfield-cursor-color — Miko, Jun 11 '20 at 11:09
@Matthias found [this](https://stackoverflow.com/questions/49966980/how-to-create-toolbar-searchview-in-flutter) to be somewhat similar without having to deal with `appBarTheme` — dev-aentgs, Jun 11 '20 at 11:21
I'm sorry @dev-aentgs, you were right with your first suggestion. I tried to change `display2`, but I needed to change the `title`. I added `textTheme: TextTheme(title: TextStyle( color: Colors.white, fontSize: 18,),),` to the 'app`BarTheme` and it worked. THANK YOU!. I you want to write an answer, I could acceppt it :D — Matthias, Jun 11 '20 at 11:29

score 14 · Answer 1 · edited Oct 01 '21 at 15:16

Using SearchDelegate you can customize both, Search's text hint value and color as well as query's color and size. To achieve this:

Search's text hint value --> you can override searchFieldLabel which is a String.

@override
String get searchFieldLabel => 'Your Custom Hint Text...';

Search's color --> you can override with hintColor property of the Theme class:

@override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
      hintColor: Colors.white,
    );
  }

Query's text color and size --> you need to override delegate's appBarTheme method and change what you need. To change query's text color, set the textTheme of headline6:

@override
ThemeData appBarTheme(BuildContext context) {
assert(context != null);
final ThemeData theme = Theme.of(context).copyWith(
  textTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.white,
      fontSize: 18.0,
    ),
  ),
);
assert(theme != null);
return theme;
}

If i override the ThemeData, I have to redefine everything, including the background, the leading and action icons, and everything. How do you explicitly change just the headline6 or now known as titleLarge? — Texv, Apr 20 '23 at 01:57

score 2 · Answer 2 · answered Sep 23 '21 at 07:51

This is how I am theming search delegate:

  @override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
      inputDecorationTheme: searchFieldDecorationTheme,
      textTheme: Theme.of(context).textTheme.copyWith(
        headline6: TextStyle(color: Colors.white),
      ),
    );
  }

I copy global textTheme styles, and override only specific headline. For more search styling (like hint color, search input size, input underline etc.), inputDecorationTheme is used.

score 1 · Answer 3 · answered Jun 11 '20 at 13:03

1

Change the headline6 text style in your app ThemeData :

MaterialApp(
      theme: ThemeData(
      textTheme: TextTheme(
          headline6: TextStyle(color: 'Your Prefered Color'))
      ),
      home: Home()
    );

answered Jun 11 '20 at 13:03

The Chinky Sight

349
4
19

dev-aentgs · Accepted Answer · 2020-09-10T14:31:01.953

0

With reference to the discussion in the comments of the question, appBarTheme's textTheme property allows changing the color. example code credit @Matthias

Code:

textTheme: TextTheme(title: TextStyle( color: Colors.white, fontSize: 18,),),

edited Sep 10 '20 at 14:31

answered Jun 11 '20 at 12:53

dev-aentgs

1,218
2
9
17

1

This seems like a comment rather than an answer. With a bit more reputation points, [you will be able to post comments](https://stackoverflow.com/help/privileges/comment). Also check [this article](https://codeblog.jonskeet.uk/2009/02/17/answering-technical-questions-helpfully/) about answering questions. – Aleksey Potapov Jun 11 '20 at 13:51
2

That's my fault @Aleksey Potapov. He pointed it out in the comment section under the question, and because it solved my problem I asked him to write an answer so that I can accept it. – Matthias Jun 11 '20 at 14:03
1

Ok, it is nice that he helped you. I'm just following moderation instructions. – Aleksey Potapov Jun 11 '20 at 14:07

score 0 · Answer 5 · answered Jul 24 '21 at 04:35

0

All these answers regarding textTheme property affect the Text widget in other parts of the search page. So you would end up with somewhat transparent text in light theme because the text color has blended with the background.

So it is an incomplete solution

answered Jul 24 '21 at 04:35

chitgoks

311
2
6
17

I use the search_page lib and you call copyWith() from the theme and override the properties for that – chitgoks Jul 31 '21 at 10:47
but what about when we have more than one theme say darkTheme, lightTheme and blueTheme how do we change the colour of the text in accordance to which theme is selected?, because the copyWith() method in this context is just a const and doesn't change when the theme changes. – Aug 06 '21 at 12:55
have a getter method to detect which theme youre currently using then return the approriate theme data – chitgoks Aug 07 '21 at 13:04
I have added new answer, which also solves this issue. – Andris Sep 23 '21 at 07:54

score 0 · Answer 6 · answered Sep 26 '22 at 20:27

I added the hintColor:Colors.white line and it worked for me.

@override
ThemeData appBarTheme(BuildContext context) {
final ThemeData theme = Theme.of(context);
return theme.copyWith(
  primaryColor: Colors.blue,
  primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white),
  hintColor: Colors.white,
  
  textTheme: TextTheme(
    headline6: TextStyle(color: Colors.white,
    fontSize: 18)
    
  )
);

osw · Answer 7 · 2023-05-30T14:31:49.713

with this code I was able to modify all (or almost?...) colors of the searchdelegate theme

images of screens: hint and input text

      @override
  ThemeData appBarTheme(BuildContext context) {
    return ThemeData(
      appBarTheme: const AppBarTheme(
        color: Color(0xFF0BB58C), // AppBar backgound color
      ),

      textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.white, // cursor color
      ),

      textTheme: const TextTheme(
        titleLarge: TextStyle(
          decorationThickness: 0.0000001, // input text underline
          color: Colors.white // input text color
        ),
      ),

      inputDecorationTheme: InputDecorationTheme(
        border: InputBorder.none, // input field border
        hintStyle: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.grey[700]), // hint text color
      ),
    );
  }

Flutter - how to change textcolor in search delegate class?

7 Answers7

Linked