CODEWITHSUNDEEP
searchflutterhint
Despotovic
Despotovic

Reputation: 1962

Flutter - Change search hint text of SearchDelegate

In current implementation of SearchDelegate, there is no option to change the hint text. When the query is empty, search screen is displaying "Search" in the query field as a hint text.

Hint text is currently defined on line 395 as follows:

final String searchFieldLabel = MaterialLocalizations.of(context).searchFieldLabel;

There is, however, an existing issue to this subject reported.

I wasn't able to come up with any solution for this. Do you know any workaround for the issue?

Upvotes: 32

Views: 19497

Answers (7)

Nipun Dexter
Nipun Dexter

Reputation: 11

Use the "searchFieldLabel" properties to customize the placeholder for the search box and can also modify the SearchDelegate properties listed below:

SearchDelegate({
    this.searchFieldLabel,
    this.searchFieldStyle,
    this.searchFieldDecorationTheme,
    this.keyboardType,
    this.textInputAction = TextInputAction.search,
  })........

To illustrate:

class SearchScreen extends SearchDelegate {
 
  SearchScreen({
    String hintText = "অনুসন্ধান",
  }) : super(
          searchFieldLabel: hintText,
          keyboardType: TextInputType.text,
          textInputAction: TextInputAction.search,
          searchFieldStyle: TextStyle(
              color: Color.fromARGB(178, 255, 255, 255),
              fontWeight: FontWeight.bold),
        );
.
.
}

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 267474

With null-safety, you should do something like:

class MyDelegate extends SearchDelegate<String> {
  final String? hintText;
  MyDelegate({this.hintText});
  
  @override
  String? get searchFieldLabel => hintText;
  
  // Other overrides...
}

Usage:

showSearch<String>(
  context: context,
  delegate: MyDelegate(hintText: 'My hint'),
);

Upvotes: 2

Rafsan Uddin Beg Rizan
Rafsan Uddin Beg Rizan

Reputation: 2287

class SongSearch extends SearchDelegate<String> {
  SongSearch({
    String hintText = "Song Search",
  }) : super(
          searchFieldLabel: hintText,
          keyboardType: TextInputType.text,
          textInputAction: TextInputAction.search,
        );
.....

Upvotes: 19

eyoeldefare
eyoeldefare

Reputation: 2303

You can just extend the source class and override its default field in your constructor to define your own value for the field?

For example:

class CustomSearch extends SearchDelegate<String> {
    CustomSearch() : super(searchFieldLabel: "My own hint");
}

Upvotes: 1

CP17
CP17

Reputation: 481

As far as the hint color is concerned, if you're still looking for a solution, HintColor won't work. Use the InputDecoration property of ThemeData like so:

inputDecorationTheme: InputDecorationTheme(hintStyle: Theme.of(context).textTheme.title.copyWith(color: Colors.white),)

Upvotes: 4

Manass&#233;
Manass&#233;

Reputation: 1031

Currently SearchDelegate has an optional member "searchFieldLabel" to specify the label of the search field. It should look something like this: 

  @override
  String get searchFieldLabel => 'custom label';

Upvotes: 82

Jordan Davies
Jordan Davies

Reputation: 10861

There is a workaround for this by creating your own DefaultMaterialLocalizations class and passing it into the MaterialApp widget:

void main() => runApp(SearchApp());

class SearchApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        CustomLocalizationDelegate(),
      ],
      home: Scaffold(
        appBar: AppBar(
          title: Text('Search demo'),
        ),
        body: Center(
          child: Builder(
            builder: (context) => MaterialButton(
              child: Text('Search'),
              onPressed: () => showSearch(
                context: context,
                delegate: DummyDelegate(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class DummyDelegate extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) => [];

  @override
  Widget buildLeading(BuildContext context) => IconButton(
    icon: Icon(Icons.close),
    onPressed: () => Navigator.of(context).pop(),
  );

  @override
  Widget buildResults(BuildContext context) => Text('Result');

  @override
  Widget buildSuggestions(BuildContext context) => Text('Suggestion');
}

class CustomLocalizationDelegate extends LocalizationsDelegate<MaterialLocalizations> {
  const CustomLocalizationDelegate();

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'en';

  @override
  Future<MaterialLocalizations> load(Locale locale) => SynchronousFuture<MaterialLocalizations>(const CustomLocalization());

  @override
  bool shouldReload(CustomLocalizationDelegate old) => false;

  @override
  String toString() => 'CustomLocalization.delegate(en_US)';
}

class CustomLocalization extends DefaultMaterialLocalizations {
  const CustomLocalization();

  @override
  String get searchFieldLabel => "My hint text";
}

Upvotes: 15

Related Questions