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.
CodePudding user response:
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'),
),
],
);
});
});
}