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?

Answer 1

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

Answer 2

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.

Answer 3

Change the headline6 text style in your app ThemeData :

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