Flutter Tip: Make Bottom Popups Fit Your Content (No Extra Space!)

Ever created a bottom popup in your Flutter app and found it was taller than it needed to be? By default, sometimes these popups take up more vertical space than your content actually requires, leaving awkward empty areas.

This is a common problem when using widgets like showCupertinoModalPopup or similar bottom sheets.

The good news is there's a simple trick to fix this! You can use the IntrinsicHeight widget.

What does IntrinsicHeight do? Basically, it tells its child widget to figure out the minimum height it needs to display its content properly. Then, IntrinsicHeight will size itself (and thus the bottom popup) to exactly that height.

Here's how you can use it:

Wrap the widget you want to show inside your bottom popup with IntrinsicHeight.

showCupertinoModalPopup<void>(
  context: context,
  builder: (_) => const IntrinsicHeight(
    child: YourContentWidget(), // Put your content here
  ),
);

By adding IntrinsicHeight around your content widget, your bottom popup will now automatically adjust its height to fit snugly around whatever you put inside it. No more wasted space!

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

Frequently Asked Questions

Why is my Flutter bottom modal too tall?

By default, some bottom modal widgets might not automatically size themselves perfectly to the content inside, resulting in extra empty space below your actual UI elements.

How can I make a Flutter bottom modal fit its content height?

You can wrap the main content widget inside your bottom modal or popup (like the `builder` in `showCupertinoModalPopup`) with the `IntrinsicHeight` widget.

What does IntrinsicHeight do?

IntrinsicHeight is a widget that sizes its child to the child's 'intrinsic' or natural height – the minimum height required for the child to render its content without overflowing.