How to move slider scroll in the AlertDialog in Flutter?

Issue

The slider works fine outside the AlertDialog, but when I insert the slider into the content inside the AlertDialog, the display works fine, but it doesn’t scroll. How do I solve this?

This is Image that AlertDialog with SfSlider

This is my code:

  double _value = 40.0;
  SfRangeValues _values = SfRangeValues(15.0, 35.0);

  _showDialog() async {
    await showDialog<String>(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: const Text('총톤수'),
        content: SizedBox(
          width: 500,
          height: 80,
          child:  SfRangeSlider(

              min: 0.0,
              max: 50.0,
              values: _values,
              interval: 10,
              showLabels: true,
              enableTooltip: true,
              onChanged: (SfRangeValues values){
                setState(() {
                  _values = values;
                });
              },
            ),
          ),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context, 'Cancel'),
            child: const Text('Cancel'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, 'OK'),
            child: const Text('OK'),
          ),
        ],
      ),
    );

This is GestureDetector:

 GestureDetector(
                onTap: () {
                  return _showDialog();
                },

Thank you.

Solution

here is the problem, since alertdialog is a separate context, you have to wrap it with stateful and make it setstate, I edited your code.

_showDialog() async {
await showDialog<String>(
    context: context,
    builder: (BuildContext context) {

      return StatefulBuilder(builder: (context, setState2) {
        return AlertDialog(
          title: const Text('총톤수'),
          content: SizedBox(
            width: 500,
            height: 80,
            child: SfRangeSlider(
              min: 0.0,
              max: 50.0,
              values: _values,
              interval: 10,
              showLabels: true,
              enableTooltip: true,
              onChanged: (SfRangeValues values) {
                setState2(() {
                  _values = values;
                });
              },
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        );
      });
    });

}

Answered By – Kemal Yilmaz

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *