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.
Use labelStyle property to set text-color of ChoiceChip.
ChoiceChip(
label: Text('Hi'),
selected: isSelected,
labelStyle: TextStyle(
color: isSelected ? Colors.blue : Colors.red,
),
),
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With