Flutter Switch - onChanged Not Changing

Question

When using the following Switch widget, the isOn value always returns true and never changes.

The Switch only moves position on a swipe too, a tap won't move it. How to resolve?

bool isInstructionView = false;

Switch(
    value: isInstructionView,
    onChanged: (bool isOn) {
      setState(() {
        isInstructionView = isOn;
        print(isInstructionView);
      });
    },
    activeColor: Colors.blue,
    inactiveTrackColor: Colors.grey,
    inactiveThumbColor: Colors.grey,
)

Update: For extra clarity, onChanged always returns isOn as true. Why would this be?

setState() always change your value to false define it in StatefulWidget extended class instead of State extended. — Sher Ali, Sep 07 '18 at 12:53
@JoshKahane same problem with me, did you find a solution please? — Abdullah Bahattab, Nov 23 '21 at 00:17

score 9 · Answer 1 · answered May 15 '20 at 01:50

You just need to make sure to declare the bool for the switch toggle outside Widget build to make it global and acessible for SetState method. No need to initstate and etc.

    class ExampleClass extends StatefulWidget {
     @override
     _ExampleClassState createState() => _ExampleClassState();
    }

    class _ExampleClassState extends State<ExampleClass> {

     bool isInstructionView = false;

     @override
     Widget build(BuildContext context) {

      return Container(
       child:  Switch(
       value: isInstructionView,
       onChanged: (isOn) {

         setState(() {
           isInstructionView = isOn
         });

         print(isInstructionView);

        },
        ...
      ),
     );
    }
   }

score 7 · Answer 2 · answered Dec 24 '18 at 10:35

I added additional code chunks according to @Zulfiqar 's answer. I didn't test this code but I m using similar codes in my project. if you want to save it and use in another class or if you want to show latest state for everytime you load you can save the state in a global variable and call it when you load the class. hope it will help..

class Tab_b extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new _TabsPageState();
}

class _TabsPageState extends State<Tab_b>{
  bool isInstructionView;
  @override
  void initState() {
    isInstructionView = Global.shared.isInstructionView;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("add data"),
      ),
      body: new Container(
        child:  Switch(
          value: isInstructionView,
          onChanged: (bool isOn) {
            print(isOn);
            setState(() {
             isInstructionView = isOn;
             Global.shared.isInstructionView = isOn;
             isOn =!isOn;
              print(isInstructionView);
            });
          },
          activeColor: Colors.blue,
          inactiveTrackColor: Colors.grey,
          inactiveThumbColor: Colors.grey,
        ),
      ),
    );
  }
}
class Global{
  static final shared =Global();
  bool isInstructionView = false;
}

score 3 · Answer 3 · answered Sep 07 '18 at 12:55

3

class Tab_b extends StatefulWidget {

bool isInstructionView = false;
@override
State<StatefulWidget> createState() => new _TabsPageState();
}

class _TabsPageState extends State<Tab_b>{

@override
Widget build(BuildContext context) {

return Scaffold(
    appBar: new AppBar(
    title: new Text("add data"),
),
body: new Container(
  child:  Switch(
    value: widget.isInstructionView,
    onChanged: (bool isOn) {
      print(isOn);
      setState(() {
        widget.isInstructionView = isOn;
        print(widget.isInstructionView);
      });
    },
    activeColor: Colors.blue,
    inactiveTrackColor: Colors.grey,
    inactiveThumbColor: Colors.grey,
  ),
),
);
}

answered Sep 07 '18 at 12:55

Sher Ali

5,513
2
27
29

Thanks, but it makes no difference it being declared there. I can swap it there like so: `isInstructionView = !isInstructionView;`. The issue is `isOn` doesn't change, its always provided as `true`. – Josh Kahane Sep 07 '18 at 13:10
It return always true because of when you setState it change isInstructionView value to false and this value is assigned to switch value i.e. it return again it's initial state. – Sher Ali Sep 07 '18 at 13:23
I'm sure I understand, but even with your change, it doesn't affect it because 'isOn' value returned by `onChanged` never changes. – Josh Kahane Sep 07 '18 at 13:26
1

@JoshKahane This code works for me I just move `bool isInstructionView = false;` under my main class then I called it like this `value: widget.isInstructionView,` then in `setState() `i called `widget.isInstructionView = isOn` – Abdullah Bahattab Nov 23 '21 at 00:33

score 3 · Answer 4 · answered Nov 24 '20 at 11:49

Here Is my code for toggle button

class ToggleButtonScreen extends StatefulWidget {
 @override
 _ToggleButtonScreenState createState() => _ToggleButtonScreenState();
}

class _ToggleButtonScreenState extends State<ToggleButtonScreen> {
 bool _value = false;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SafeArea(
       child: Center(
         child: Container(
           decoration: BoxDecoration(
             image: DecorationImage(
               image: _value ? AssetImage("images/cnw.png") : AssetImage("images/cnw.png"),
               fit: BoxFit.cover,
             ),
           ),
           child: Padding(
             padding: EdgeInsets.all(AppDimens.EDGE_REGULAR),
             child: Column(
               children: [
                // _customSwitchButton(),
                 _normalToggleButton(),
               ],
             ),
           ),
         ),
       ),
     ),
   );
 }

Widget _normalToggleButton () {
   return Container(
     child: Transform.scale(
       scale: 2.0,
       child: Switch(
         activeColor : Colors.greenAccent,
         inactiveThumbColor: Colors.redAccent,
         value: _value,
           activeThumbImage: AssetImage("images/cnw.png"),
           inactiveThumbImage : AssetImage("images/simple_interest.png"),
           onChanged: (bool value){
            setState(() {
              _value = value;
            });
           },
       ),
     ),
   );
}
}

score 1 · Answer 5 · answered Mar 31 '19 at 11:49

1

You need to rebuild the widget when the state changes. refer the documentation https://docs.flutter.io/flutter/material/Switch/onChanged.html

answered Mar 31 '19 at 11:49

Francis Manoj Fernnado

242
2
10

score 1 · Answer 6 · answered Jul 12 '22 at 10:23

I faced the same issue , the problem is your

bool isInstructionView = false;

is in same build method which will get rebuild due to change of switch to render new UI on setState()

Solution is to move it out of function Scope to Class Scope so that your variable do not change on rendering Widget again

score 0 · Answer 7 · answered Apr 03 '21 at 05:55

To get Switch to work , move the setState(() {}) outside of Switch in a callback function .

// Switch  Widget
    Switch( value: _toggleState,
            onChanged: _attemptChange,
            ),
    
//Callback
 void _attemptChange(bool newState) {
    setState(() {
      _toggleState = newState;
      newState ? _switchCase = 'ON' : _switchCase = 'OFF';
    });

Cha Mildz · Answer 8 · 2022-07-01T14:32:18.910

0

Change SwitchListTile instead of Switch will work.

bool isSwitched = false;

SwitchListTile(
    title: Text("title"),
    controlAffinity: ListTileControlAffinity.leading,
    contentPadding: EdgeInsets.symmetric(),
    value: isSwitched ,
    onChanged: (bool value) {
      setState(() {
        isSwitched = value;
      });
    }
)

edited Jul 01 '22 at 14:32

answered Jul 01 '22 at 14:22

Cha Mildz

11
2

score 0 · Answer 9 · answered Jul 01 '22 at 14:48

0

Use Transform when use Switch will work.

 bool isSwitched = false;

 Transform.scale(
  scale: 1.8,
  child: Switch(
    onChanged: (value) {
      setState(() {
        isSwitched = value;
      });
    },
    value: isSwitched,
  ),
 )

answered Jul 01 '22 at 14:48

Cha Mildz

11
2

score -1 · Answer 10 · answered Nov 12 '19 at 04:02

I have also got the same problem while I was implementing CupertinoSwitch. I was able to turn it ON but wasn't able to turn it OFF.

According to this example, I tried to put my Switch inside the widget called 'Semantics' and magically it started working.

Below is the code:

body: Column(
    children: <Widget>[
      SizedBox(height: 50.0,),
      Semantics(
        container: true,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            CupertinoSwitch(
              value: _switchValue,
              onChanged: (bool value){
                setState(() {
                  _switchValue = value;
                  _animating = value;
                });
              },
            ),

            Text(
              "${_switchValue ? "On" : "Off"}",
              style: TextStyle(fontSize: 20.0,
                              fontWeight: FontWeight.bold),
            ),
          ],  
        ),
        ),
        SizedBox(
          height: 50.0,
        ),
        Visibility(
            child: CupertinoActivityIndicator(
            animating: _animating,
            radius: 30.0,
          ),
          visible: _animating,
        ),
    ],

  ),

Hope it helps.

Flutter Switch - onChanged Not Changing

10 Answers10