CODEWITHSUNDEEP
flutterdart
Allan Juan
Allan Juan

Reputation: 2558

How to remove blank space in AlertDialog?

I wanted to show an AlertDialog that prompts the user for picking a color. I did it, however, there is a lot of blank space between the ColorPicker and the action buttons:

enter image description here

How can I remove the blank space and make the dialog only as big as it should be? I have tried using a Dialog instead of an AlertDialog, and also wrapping my content inside a Column with mainAxisSize set to MainAxisSize.min, but neither worked. One curious thing is that the value passed to contentPadding seems to cause no effect on the UI. I have tried different values and it keeps the same.

This is the code: 

void _showColorPickerDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            contentPadding: const EdgeInsets.all(6.0),
            title: Text('Pick a color'),
            content: MaterialColorPicker(),
            actions: [
              FlatButton(
                  child: Text('CANCEL', style: TextStyle(color: Colors.blue)),
                  onPressed: Navigator.of(context).pop),
              FlatButton(
                  child: Text('OK', style: TextStyle(color: Colors.blue)),
                  onPressed: Navigator.of(context).pop),
            ],
          );
        });
  }

The (Material ColorPicker) package's author provides some code showing how to do this, which is quite similar to mine, but it has the same problem. Maybe my Flutter version is not the same as his. Anyways, do you guys know any good approach to solve this? Thanks in advance.

Upvotes: 4

Views: 3438

Answers (4)

aneebhiba614
aneebhiba614

Reputation: 31

Set scrollable property to true.

Upvotes: -2

Mudasir Habib
Mudasir Habib

Reputation: 848

Wrap MaterialColorPicker in Column and give mainAxisSize to MainAxisSize.min

void _showColorPickerDialog() {
showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        contentPadding: const EdgeInsets.all(6.0),
        title: Text('Pick a color'),
        content: Column(mainAxisAlignment: MainAxisAlignment.start, 
        mainAxisSize: MainAxisSize.min,
        children: [MaterialColorPicker()]),
            actions: [
              FlatButton(
                  child: Text('CANCEL', style: TextStyle(color: Colors.blue)),
                  onPressed: Navigator.of(context).pop),
              FlatButton(
                  child: Text('OK', style: TextStyle(color: Colors.blue)),
                  onPressed: Navigator.of(context).pop),
            ],
          );
        });
  }

Upvotes: 0

Munaf Mulani
Munaf Mulani

Reputation: 1

Maybe this will work for you: content: Column(mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [MaterialColorPicker()]),

Upvotes: 0

burakozyurt
burakozyurt

Reputation: 124

Maybe it can works; Give height to MaterialColorPicker function

content: Container(height:250, child: MaterialColorPicker(),)

Upvotes: 5

Related Questions