Flutter - 如何更改搜索委托 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 and color --> you can override searchFieldLabel and searchFieldStyle , the first is a String, the latter a TextStyle:

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

@override
TextStyle get searchFieldStyle => TextStyle(
    color: Colors.white,
    fontSize: 18.0,
  );

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

Change the headline6 text style in your app ThemeData :

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

Answer 3

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

Answer 4

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

Answer 5

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 6

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