SwitchListTile does not change value when displayed in a modal sheet. [Flutter]

Question

I have a bottommodalsheet where i have defined a SwitchListTile widget -

  bool isSwitched = false;


  void _onSwitchChanged(bool value) {
//    setState(() {
    isSwitched = value;
//    });
  }

void _showModalSheet() {
    showModalBottomSheet(context: context,backgroundColor: Color(redcolor),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        isScrollControlled: true,
//        useRootNavigator: true,
        builder: (builder) {
      return Container(
//        height: 500,
        height: MediaQuery.of(context).copyWith().size.height * 0.50,//        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SwitchListTile(
              secondary: Icon(Icons.notifications, color: Colors.white,),
              title: whitefontstyleBebas(text: "Notification", size: 20,), // just a custom font, otherwise a regular Text widget
              value: isSwitched,
              onChanged: (bool value){
                setState(() {
                  _onSwitchChanged(value);

                });
              },
            ),
            ],
          ),
      );
      }
    );
  }

When i defined this switch in the modal sheet, the ontap property does not seem to be toggling the switch to on or off. But, When i define this switchListTile outside the modal sheet, it changes its value when i click on it. Could someone suggest me where this is going wrong?

Answer 1

You need to have StatefulWidget inside BottomSheet,

  void _settingModalBottomSheet(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return bottom();// return a StatefulWidget widget 
        });
  }

Then declare your StatefulWidget widget like tis,

class bottom extends StatefulWidget {
  @override
  _bottomState createState() => _bottomState();
}

class _bottomState extends State<bottom> {
  bool isSwitched = false;


  void _onSwitchChanged(bool value) {
//    setState(() {
    isSwitched = value;
//    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
        children: <Widget>[

          SwitchListTile(
            secondary: Icon(Icons.notifications, color: Colors.white,),
            title:Text('Notification'), // just a custom font, otherwise a regular Text widget
            value: isSwitched,
            onChanged: (bool value){
              setState(() {
                _onSwitchChanged(value);

              });
            },
          ),

        ],
      ),
    );
  }
}

Output: