Set the icon for switch button in Flutter

Question

I wanted to set the "done" icon for switch when it is on, and "close" icon when it is off.

Here is a sample image:

enter image description here

I am looking for same toggle switch as shown in the image, in that rounded I need tick mark on when I slide it ON, cross mark when I slide it OFF.

How can I do this?

Does this answer your question? [How to use conditional statement within child attribute of a Flutter Widget (Center Widget)](https://stackoverflow.com/questions/49713189/how-to-use-conditional-statement-within-child-attribute-of-a-flutter-widget-cen) — revmatcher, Mar 26 '21 at 12:18

score 1 · Answer 1 · answered Mar 26 '21 at 12:17

Use the onPress() function to toggle a boolean variable when the button is pressed. Call setState(). And then based on what value the variable holds, change the widget returned from the return statement.

What you need is called conditional rendering

You can look this up and find several posts on google as well as SO.

score 1 · Answer 2 · answered Mar 26 '21 at 12:28

You can try using a boolean value with switch statement.

First, declare a boolean

var isOn = True;

Then, use a ternary operator to conditionally render the On/Off Icon Widget. You need to toggle the boolean value using setState as well on button/icon pressed.

InkWell(
  onTap: () => setState(() => isOn = !isOn),
  child: isOn ? SwitchOnIconWidget() : SwitchOffIconWidget(),
)

Or, if you want to use it with onPressed, then you can do that as well:

onPressed: () => setState(() => isOn = !isOn),
child: isOn ? SwitchOnIconWidget() : SwitchOffIconWidget(),

Set the icon for switch button in Flutter

2 Answers2