CODEWITHSUNDEEP
flutter
TheLetch
TheLetch

Reputation: 405

How do I change the check icon color in flutter filterChip

I need a way to change the check (✔) color to white. How do I achieve thatscrennshot of the current result

Upvotes: 3

Views: 8060

Answers (4)

Ken Verganio
Ken Verganio

Reputation: 645

You can change the color of the checkmark by using checkMarkColor property 

FilterChip(
        label: Text('Pizza'),
        shape: StadiumBorder(side: BorderSide()),
        checkmarkColor: Colors.red,
        backgroundColor: Colors.transparent,
      ),

Upvotes: 5

SoftWyer
SoftWyer

Reputation: 2197

You can work around this by using an Avatar and customising this to represent the tick mark, e.g.

FilterChip(
   label: Text(
      "label text",
         style: TextStyle(color: Colors.red),
      ),
      avatar: isSelected ? Icon(Icons.check, color: contrastColor(Colors.red)) : null,
      // selected: isSelected,
   },
)

The function contrastColor just looks at the supplied colour and chooses white or black depending upon its luminescence.

The animation effects when toggling ruin this slightly, so you may want to keep an 'empty' avatar rather than null if it looks bad.

Wrapping the FilterChip with a Theme sort of works but, for me at least, it rendered the background colours incorrectly (too dark) when flipping between light and dark themes.

Upvotes: 2

Tim Klingeleers
Tim Klingeleers

Reputation: 3034

Black or white checkmark

You can change the color to either black or white based on a light or dark theme. You can change the theme globally or wrap the specific widget within a Theme widget.

Theme(
  data: ThemeData(
    brightness: Brightness.dark
  ), // or shorthand => ThemeData.dark()
  child: FilterChip(
    label: Text('My chip'),
    onSelected: (value) {
      // ...
    },
  ),
);

Other colors

There is currently no way to change the color of the checkmark in the FilterChip provided by the Material package to an arbitrary color. The way the checkmark is drawn can be found in the source code for the Chip classes here.

For future reference, this is the part of code that draws the checkmark:

void _paintCheck(Canvas canvas, Offset origin, double size) {
    Color paintColor;
    switch (theme.brightness) {
      case Brightness.light:
        paintColor = theme.showAvatar ? Colors.white : Colors.black.withAlpha(_kCheckmarkAlpha);
        break;
      case Brightness.dark:
        paintColor = theme.showAvatar ? Colors.black : Colors.white.withAlpha(_kCheckmarkAlpha);
        break;
    }
    ...

So it is only able to show either as black or white right now. If you want it colored, you'll have to resort to a custom widget.

You could also chime in on the already opened issue on Flutters Github project.

Upvotes: 3

GaboBrandX
GaboBrandX

Reputation: 2685

You can simply wrap your FilterChip in a Theme widget, and set the desired ThemeData without changing your general app style.

Theme(
  data: ThemeData.dark(), // White color. Select light for black.
  child: FilterChip(
    label: Text('Test'),
    selected: _selected,
    onSelected: (val) {
      setState(() => _selected = val);
    },
    backgroundColor: Colors.blue,
    selectedColor: Colors.pink,
    labelStyle: TextStyle(
      color: Colors.white,
    ),
  ),
),

Upvotes: 2

Related Questions