Flutter - Change search hint text of SearchDelegate
Solution 1
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";
}
Solution 2
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';
Solution 3
class SongSearch extends SearchDelegate<String> {
SongSearch({
String hintText = "Song Search",
}) : super(
searchFieldLabel: hintText,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.search,
);
.....
Solution 4
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),)
Solution 5
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");
}
Related videos on Youtube
Despotovic
I finished Faculty of Electrical Engineering in Belgrade, department of computer sciences and informatics and earned MSCEE degree. As a co-founder of two small companies, OXY d.o.o. and Kern d.o.o., I had a luck to work and act as a head of software development and project manager in a variety of interesting projects. Majority of the projects were based on long-term outsourcing contracts with foreign partners.Brief portfolio is available on our site www.oxy.rs. I started with writing code in C# for several years and continued with embedded projects involving C, C++ and rtos. I was also involved in various iOS projects for many years now. I was teaching Objective C to students in Belgrade. Now I'm most interested in iOS and embedded.
Updated on June 14, 2022Comments
-
Despotovic almost 2 years
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?
-
illuminate almost 5 yearsAwesome. Can you also suggest how we can change the Hint Text color and Cursor Color for the search bar since it does not take the value defined in the main app ThemeData.
-
Jordan Davies almost 5 yearsYeah, ThemeData has a
hintColor
property. -
siega over 4 yearsThis should be checked as the right answer. The first one is a workaround that doesn't work when you have two or more searches in your app.
-
chitgoks over 4 yearsyes, there does not seem to be a way to override cursor color. is there? ive successfully overriden colors to match the theme's app bar but the cursor does not get changed.
-
ricardogobbo about 4 yearsSome tip to change hint text style?
-
Leonardo Emili about 4 years@riccardogobbo I opened a PR (github.com/flutter/flutter/pull/54674) because Flutter is currently missing a proper way to set it using the constructor. It is currently only possible using this workaround: stackoverflow.com/questions/61194153/…
-
Ørjan over 3 yearsSimple and easy solution!