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 :

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

Leave a Reply