Flutter - how to change textcolor in search delegate class?

3,541

Solution 1

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

Solution 2

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

Solution 3

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.

Solution 4

Change the headline6 text style in your app ThemeData :

MaterialApp(
      theme: ThemeData(
      textTheme: TextTheme(
          headline6: TextStyle(color: 'Your Prefered Color'))
      ),
      home: Home()
    );
Share:
3,541
Matthias
Author by

Matthias

typing...

Updated on December 21, 2022

Comments

  • Matthias
    Matthias 11 months

    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?

  • Aleksey Potapov
    Aleksey Potapov over 3 years
    This seems like a comment rather than an answer. With a bit more reputation points, you will be able to post comments. Also check this article about answering questions.
  • Matthias
    Matthias over 3 years
    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.
  • Aleksey Potapov
    Aleksey Potapov over 3 years
    Ok, it is nice that he helped you. I'm just following moderation instructions.
  • chitgoks
    chitgoks over 2 years
    I use the search_page lib and you call copyWith() from the theme and override the properties for that
  • Admin
    Admin over 2 years
    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.
  • chitgoks
    chitgoks over 2 years
    have a getter method to detect which theme youre currently using then return the approriate theme data
  • Andris
    Andris about 2 years
    I have added new answer, which also solves this issue.