Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to make a SizedBox shrink as much as possible when showing a bottom sheet?

As the main content for a bottom sheet I am returning a SizedBox with a column and some children inside. However, when showing the bottom sheet, the height of the SizedBox is set to be of fixed value (half the height of the screen by default if a height is not specified) instead of allowing the SizedBox to shrink as much as possible to fit its content. How can this be fixed?

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You just need to set mainAxisSize property of the Column widget to MainAxisSize.min and it will adjust its height to fit the content. Example:

Scaffold(
  body: Container(
    color: Colors.lightBlue,
    alignment: Alignment.center,
    child: const Text('Screen'),
  ),
  bottomSheet: Container(
    color: Colors.greenAccent,
    width: double.infinity,
    child: const Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('This is your minimal bottom sheet.'),
        SizedBox(height: 10),
        Text('It adjusts it\'s height to fit it\'s content ...'),
        SizedBox(height: 10),
        Text('...thanks to the MainAxisSize.min property'),
        SizedBox(height: 10),
      ],
    ),
  ),
)

enter image description here

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading