MainAxisSize.min not working in custom dialog

59 Views Asked by At

EDIT

Using the methods I tried, and the answers I got I couldn't achieve the auto-size effect and always got the dialog at its full height, so I switched from using Scaffold to Containers. If there is a checked way of doing it with Scaffold feel free to post it. Thanks.


Question

I'm trying to make my dialog auto-size to fit all its content using MainAxisSize.min in my Scaffold Column widget, but I'm still getting the widget at its full length. Why the MainAxisSize.min doesn't work here?

This is the code of dialog:

class AddSockPopup extends Dialog {
  const AddSockPopup({super.key});

  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (context, StateSetter setState){
        return Dialog(
          elevation: 0,
          backgroundColor: Colors.transparent,
          child: _buildChild(context, setState),
        );
      },
    );
  }

  _buildChild(BuildContext context, StateSetter setState) {
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(12)),
      child: Scaffold(
        backgroundColor: Colors.grey[300],
        appBar: AppBar(
          title: Text('Sock details'),
          centerTitle: true,
          backgroundColor: Colors.purple[400],
          automaticallyImplyLeading: false,
        ),
        body: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [...],
          ),
        ),
      ),
    );
  }
}

This is what I get

2

There are 2 best solutions below

1
Dhafin Rayhan On

Wrap your Scaffold with Column and set mainAxisSize: MainAxisSize.min:

return ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(12)),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Scaffold(
        // ...
      ),
    ],
  ),
);
2
WebDesk Solution On

@Babushka Use the ConstrainedBox widget to allow for dynamic height adjustment of the dialog. It will automatically adjust based on your content.

ConstrainedBox(
                 
                  constraints: BoxConstraints(
                    minWidth: MediaQuery.of(context).size.width * 0.80,
                    maxWidth: MediaQuery.of(context).size.width * 0.80,
                    minHeight: MediaQuery.of(context).size.height * 0.30,
                  ),

                  child: [Your widget]
         
                ),

I hope this will help!