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

1,771

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:

Share:
1,771
Ravinder Kumar
Author by

Ravinder Kumar

Updated on December 15, 2022

Comments

  • Ravinder Kumar
    Ravinder Kumar 15 minutes

    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?