Change font style of searchFieldLabel in SearchDelegate Flutter

Question

I implemented a SearchAppBar using SearchDelegate of Material and changed the hint text default of the Search Delegate using the responses from this question.

But, I'm having the problem of can't change the font style of the hint text at the search field, that is displayed as showed on the image below:

I already have the style I want implemented and am using this style in another fonts of my app, but I want to apply this style to this hint text too to don't break with the style guide of the application.

Code that I'm using for changing the default message of Search Delegate:

class SearchRoomAppBar extends SearchDelegate {

    SearchRoomAppBar() : super(
        searchFieldLabel: "Search user",
        keyboardType: TextInputType.text,
        textInputAction: TextInputAction.search,
    );   
}

ricardo_dev · Answer 1 · 2022-07-23T21:03:57.800

3

SearchRoomAppBar extends SearchDelegate {

 
  // TODO: implement searchFieldStyle
  // Use widget TextStyle to customize your label string.

  @override
  TextStyle? get searchFieldStyle => TextStyle(fontSize: 28,);
  
  @override
  String? get searchFieldLabel => 'Search user';

edited Jul 23 '22 at 21:03

answered Jul 23 '22 at 20:54

ricardo_dev

51
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 27 '22 at 21:29

score 2 · Answer 2 · answered May 30 '20 at 10:22

The SearchDelegate app bar text is styled with whatever style is set to ThemeData.textTheme.headline6.

By default, SearchDelegate uses your app's ThemeData, but you can override the ThemeData appBarTheme(BuildContext context) method to return a custom version.

  @override
  ThemeData appBarTheme(BuildContext context) {
    // You can use Theme.of(context) directly too
    var superThemeData = super.appBarTheme(context);

    return superThemeData.copyWith(
      textTheme: superThemeData.textTheme.copyWith(
        headline6: /* Whatever style you want to apply to your text */,
      ),
    );
  }

headline6 is deprecated and shouldn't be used. instead use ```Theme.of(context).textTheme.titleLarge``` — Abdi Nur, May 25 '23 at 08:03

score 0 · Answer 3 · answered Feb 01 '20 at 02:25

You can override SearchDelegate appBarTheme method:

  @override
  ThemeData appBarTheme(BuildContext context) {
      assert(context != null);
      final ThemeData theme = Theme.of(context);
      assert(theme != null);
      return theme;
  }

https://dartpad.dartlang.org/69724799fd6653ea4cf650a5a758c3d1

Change font style of searchFieldLabel in SearchDelegate Flutter

3 Answers3