CODEWITHSUNDEEP
flutterdartmaterial-design
Isac Moura
Isac Moura

Reputation: 6888

Change font style of searchFieldLabel in SearchDelegate Flutter

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:

Search Delegate hint

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

Upvotes: 3

Views: 1467

Answers (3)

ricardo_dev
ricardo_dev

Reputation: 51

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

Upvotes: 3

JLP-Dev
JLP-Dev

Reputation: 265

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 */,
      ),
    );
  }

Upvotes: 2

pedrotech
pedrotech

Reputation: 1379

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

enter image description here

Upvotes: 0

Related Questions