Slider takes up too much space in alert dialog

Viewed 148

I'm trying to create an alert dialog which will allow the user to select a quantity using a slider however the slider takes up an unnecessary amount of space and expands the alert dialog to take up most of the screen even when its padding is set to 0:

Widget build(BuildContext context) {
return AlertDialog(
  title: Text("Select quantity"),
  contentPadding: EdgeInsets.all(0),
  content: Slider(
    value: sliderVal,
    label: "$sliderVal",
    activeColor: Colors.tealAccent,
    inactiveColor: Colors.teal,
    min: 1,
    max: widget.maxStack.toDouble(),
    onChanged: (newVal) {
      setState(() {
        sliderVal = newVal;
      });
    },
  ),
  actions: [
    ElevatedButton(
        onPressed: null,
        child: Text("Confirm"))
  ],
);}

enter image description here

How can I reduce the amount of empty space around the slider within the alert dialog?

1 Answers

try with wrap

Wrap(
      children: [
        AlertDialog(
          title: Text("Select quantity"),
          contentPadding: EdgeInsets.all(0),
          content: Slider(
            value: sliderVal,
            label: "$sliderVal"
            activeColor: Colors.tealAccent,
            inactiveColor: Colors.teal,
            min: 1,
            max: widget.maxStack.toDouble(),
            onChanged: (newVal) {
              setState(() {
            sliderVal = newVal;
          });
            },
          ),
          actions: [
            ElevatedButton(
                onPressed: null,
                child: Text("Confirm"))
          ],
        )
      ],
    )

Output:

enter image description here

Related