Is there a way to change icon's color on toggle?

[ezrac0des]

Hi, I'd like to change the icon color on toggle but couldn't figure out how to do it. This is my current code. Is there a way to set activeFgColor/inactiveFgColor for the icons as well?

Container( child: ToggleSwitch( minWidth: 100.0, minHeight: 33.0, fontSize: responsive.screenWidth / 30, initialLabelIndex: 0, activeBgColors: [ [Colors.white], [Color(0xFFC41E5F)] ], activeFgColor: Colors.white, inactiveBgColor: Colors.white, inactiveFgColor: Colors.grey[900], borderColor: [Color(0xFFC41E5F)], animate: true, borderWidth: 1, totalSwitches: 2, labels: ['Takvim', 'Liste'], customIcons: [ Icon( Icons.calendar_month_outlined, color: Color(0xFFC41E5F), size: 22.0, ), Icon( Icons.list, color: Color(0xFFC41E5F), size: 22.0, ), ], onToggle: (index) { print('switched to: $index'); }, ), ),

[PramodJoshi]

@ezrac0des you'll need to update initialLabelIndex and your icon colors in onToggle with setState. Example code below,

class _MyHomePageState extends State<MyHomePage> {
  Color iconColorTakvim = Colors.white;
  Color iconColorListe = const Color(0xFFC41E5F);
  int selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          child: ToggleSwitch(
            minWidth: 200.0,
            minHeight: 33.0,
            fontSize: 14.0,
            initialLabelIndex: selectedIndex,
            activeBgColor: const [Color(0xFFC41E5F)],
            activeFgColor: Colors.white,
            inactiveBgColor: Colors.white,
            inactiveFgColor: const Color(0xFFC41E5F),
            borderColor: const [Color(0xFFC41E5F)],
            animate: true,
            borderWidth: 1,
            labels: const ['Takvim', 'Liste'],
            customIcons: [
              Icon(
                Icons.calendar_month_outlined,
                color: iconColorTakvim,
                size: 22.0,
              ),
              Icon(
                Icons.list,
                color: iconColorListe,
                size: 22.0,
              ),
            ],
            onToggle: (index) {
              print('switched to: $index');
              setState(() {
                selectedIndex = index!;
                selectedIndex == 0 ? iconColorTakvim = Colors.white : iconColorTakvim = const Color(0xFFC41E5F);
                selectedIndex == 1 ? iconColorListe = Colors.white : iconColorListe = const Color(0xFFC41E5F);
              });
            },
          ),
        ),
      ),
    );
  }
}

https://github.com/PramodJoshi/toggle_switch/assets/17320471/76c380a2-0d9e-4235-956a-3abd3167f563

[ezrac0des]

Thank you so much! :)