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),
],
),
),
)