Make the showModalBottomSheet() height adjust according to content

Admin 1
Viewed 560

I'm trying to make the height of the showModalBottomSheet() automatically adjust to the content.

I've used FractionallySizedBox with isScrollControlled: true but it need heightFactor to be provided.

Is there any way to adjust the height of the bottom sheet based on the content inside it?

flutter-layout dart flutter
2 Answers

I solved it with SingleChildScrollView:

showModalBottomSheet<void>(
      //isScrollControlled: true,
      backgroundColor: Colors.red,
      context: context,
      builder: (BuildContext context) {
        return SingleChildScrollView(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            
          ],
        ));
      },
    );
user_153825430
  1. set isScrollControlled to true;
  2. set column's mainAxisSize to min;
  3. set listView's shrinkWrap to true.

eg:

showModalBottomSheet(
  isScrollControlled: true,
  backgroundColor: Colors.blue,
  context: context,
  builder: (context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(width: 100, height: 100, color: Colors.green),
        Container(width: 300, height: 500, color: Colors.red),
        Container(width: 100, height: 100, color: Colors.orange),
      ],
    );
  },
);

enter image description here

user_61441180
Related