CODEWITHSUNDEEP
flutterdartflutter-layout
user14722787
user14722787

Reputation:

Make the showModalBottomSheet() height adjust according to content

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?

Upvotes: 7

Views: 3533

Answers (2)

无夜之星辰
无夜之星辰

Reputation: 6148

  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

Upvotes: 7

Moo
Moo

Reputation: 725

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>[
            
          ],
        ));
      },
    );

Upvotes: 6

Related Questions