CODEWITHSUNDEEP
flutterdartcolorsflutter-layouttextcolor
Matthias
Matthias

Reputation: 4163

Flutter - how to change textcolor in search delegate class?

I managed to change the hintStyle-color

hintstyle

@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...

enter image description here

How can I properly change the textcolor in the SearchDelegate class?

Upvotes: 11

Views: 7242

Answers (7)

osw
osw

Reputation: 1

with this code I was able to modify all (or almost?...) colors of the searchdelegate theme

images of screens: hint and input text

      @override
  ThemeData appBarTheme(BuildContext context) {
    return ThemeData(
      appBarTheme: const AppBarTheme(
        color: Color(0xFF0BB58C), // AppBar backgound color
      ),

      textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.white, // cursor color
      ),

      textTheme: const TextTheme(
        titleLarge: TextStyle(
          decorationThickness: 0.0000001, // input text underline
          color: Colors.white // input text color
        ),
      ),

      inputDecorationTheme: InputDecorationTheme(
        border: InputBorder.none, // input field border
        hintStyle: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.grey[700]), // hint text color
      ),
    );
  }

Upvotes: 0

Jim Muguna
Jim Muguna

Reputation: 11

I added the hintColor:Colors.white line and it worked for me.

@override
ThemeData appBarTheme(BuildContext context) {
final ThemeData theme = Theme.of(context);
return theme.copyWith(
  primaryColor: Colors.blue,
  primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white),
  hintColor: Colors.white,
  
  textTheme: TextTheme(
    headline6: TextStyle(color: Colors.white,
    fontSize: 18)
    
  )
);

Upvotes: 0

Carlos Daniel
Carlos Daniel

Reputation: 2699

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

Upvotes: 14

Andris
Andris

Reputation: 4193

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.

Upvotes: 2

chitgoks
chitgoks

Reputation: 310

All these answers regarding textTheme property affect the Text widget in other parts of the search page. So you would end up with somewhat transparent text in light theme because the text color has blended with the background.

So it is an incomplete solution

Upvotes: 0

dev-aentgs
dev-aentgs

Reputation: 1288

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

Upvotes: 0

The Chinky Sight
The Chinky Sight

Reputation: 390

Change the headline6 text style in your app ThemeData : 

MaterialApp(
      theme: ThemeData(
      textTheme: TextTheme(
          headline6: TextStyle(color: 'Your Prefered Color'))
      ),
      home: Home()
    );

Upvotes: 1

Related Questions