HappyCoding
HappyCoding

Reputation: 217

How to reduce the height of AlertDialog which includes a slider?

I want to make a AlertDialog which is included a slider (especially SfRangeSlider()).

My AlertDialog Image:

enter image description here

There is a problem with the height of AlertDialog.

My question is how to reduce the dialog size including the SfRangeSlider().

My _showDialog() as below:

void _showDialog() async {
   await showDialog<String>(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: const Text('총톤수'),
        content: SfRangeSlider(
          min: 0.0,
          max: 100.0,
          values: _values,
          interval: 10,
          showTicks: false,
          showLabels: true,
          enableTooltip: true,
          minorTicksPerInterval: 1,
          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'),
          ),
        ],
      ),
    );
  }

Thank you.

Upvotes: 0

Views: 118

Answers (2)

eamirho3ein
eamirho3ein

Reputation: 17880

If you don't want to use static height: you can wrap your SfRangeSlider with Column and set its mainAxisSize to min:

showDialog<String>(
    context: context,
    builder: (BuildContext context) => AlertDialog(
      title: const Text('총톤수'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SfRangeSlider(
            min: 0.0,
            max: 100.0,
            values: _values,
            interval: 10,
            showTicks: false,
            showLabels: true,
            enableTooltip: true,
            minorTicksPerInterval: 1,
            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'),
        ),
      ],
    ),
  );

enter image description here

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63549

You can wrap SfRangeSlider with SizedBox and provide height.

void _showDialog() async {
   await showDialog<String>(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: const Text('총톤수'),
        content: SizedBox(
           height: x, // x= hard-coded value or you can use MediaQuery.of(context).size.height *.5 ,,50% height 
           child: SfRangeSlider(
             min: 0.0,

Upvotes: 2

Related Questions