How do I customize the Material 3 Switch?
As you can see, I already did customize most of the switch to red, the only thing missing here is the "border", for some reason it is set to white and I cannot see a param where I can modify to red.
I also read the Flutter documentation of the Switch class: https://api.flutter.dev/flutter/material/Switch-class.html but 2 examples are using Material 2 and the only Material 3 example doesn't not modify the default border.
This is the current widget configuration:
Switch(
// focusColor: Colors.blue,
trackColor: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return Colors.red;
}
return Colors.red.withOpacity(.1);
},
),
overlayColor: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.red;
}
return Colors.white.withOpacity(.1);
},
),
// hoverColor: Colors.green,
thumbColor: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return HSLColor.fromColor(Colors.red)
.withLightness(0.2)
.toColor();
}
return Colors.red;
},
),
splashRadius: 24,
// inactiveTrackColor: Colors.pink,
// activeTrackColor: Colors.green,
thumbIcon: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return const Icon(Icons.check, color: Colors.red);
}
return null;
},
),
// activeColor: Colors.lime,
// inactiveThumbColor: Colors.orange,
value: _value,
onChanged: (bool value) => setState(() => _value = !_value),
)
The commented params are the ones I've already tried.
I did a DartPad where you can see the demo: https://dartpad.dev/?id=6c4ab5c547f7b7a5a0821d7dc9962485.
