Flutter - how to change textcolor in search delegate class?
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()
);
Comments
-
Matthias 11 months
I managed to change the
hintStyle
-color@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...
How can I properly change the
textcolor
in theSearchDelegate
class? -
Aleksey Potapov over 3 yearsThis 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 over 3 yearsThat'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 over 3 yearsOk, it is nice that he helped you. I'm just following moderation instructions.
-
chitgoks over 2 yearsI use the search_page lib and you call copyWith() from the theme and override the properties for that
-
Admin over 2 yearsbut 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 over 2 yearshave a getter method to detect which theme youre currently using then return the approriate theme data
-
Andris about 2 yearsI have added new answer, which also solves this issue.