Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter ChoiceChip selected Text color

Tags:

flutter

widget

How to set a specific color to the text of the selected chip with a ChoiceChip widget ? "selectedColor" is only setting the background color of the selected chip.

like image 599
Chloé Avatar asked Jun 07 '26 00:06

Chloé


2 Answers

Use labelStyle property to set text-color of ChoiceChip.

ChoiceChip(
  label: Text('Hi'),
  selected: isSelected,
  labelStyle: TextStyle(
    color: isSelected ? Colors.blue : Colors.red,
  ),
),
like image 143
Tirth Patel Avatar answered Jun 08 '26 13:06

Tirth Patel


Just in case someone comes across this in the future and wants to use themes to set the selected label text color:

ThemeData example = ThemeData(
  chipTheme: ChipThemeData(
      showCheckmark: false,
      backgroundColor: Colors.transparent,
      selectedColor: Colors.blue,
      labelStyle: const TextStyle(
          color: ChipLabelColor()
      )
  ),
);

class ChipLabelColor extends Color
    implements MaterialStateColor {
  const ChipLabelColor() : super(_default);

  static const int _default = 0xFF000000;

  @override
  Color resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.selected)) {
      return Colors.white; // Selected text color
    }
    return Colors.black; // normal text color
  }
}

This example creates a chip that has black text (and a transparent background) that changes to white when the chip is selected (with a blue background)

The MaterialStateColor class is documented here with an example that resembles the above code. While the entire label cant use material state property I found that the label color was accepting of the material state class to resolve with the different states.

like image 28
lilpomm Avatar answered Jun 08 '26 14:06

lilpomm