Flutter - how to change textcolor in search delegate class?

user_11485326 0
Viewed 4917

I managed to change the hintStyle-color

hintstyle

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

enter image description here

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

flutter-layout dart flutter textcolor colors
5 Answers

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;
}
user_62482080

Change the headline6 text style in your app ThemeData : 

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

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.

user_35649430

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

user_136253050

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

user_58550910
Related