ModalBottomSheet and the system navigation bar

The material 3 version of the ModalBottomSheet is quite simple to use in Jetpack Compose (see this guide), but the default version isn’t pixel perfect.
It might end up behind the system navigation bar or lag behind it when closing.

As you can see from this simple demo, the default sheet lags behind the navigation bar when closing, while our custom one feels a bit better.

The fix

First, make sure you tell compose that you are going to handle insets yourself, by adding this piece of code in your activity

WindowCompat.setDecorFitsSystemWindows(window, false)

Here is an example of a full activity for reference

Now we just need the the sheet to ignore the system navigation bar insets, we can do this by passing a WindowInsetsthat doesn’t take count of that, for example WindowInsets.displayCutout (those probably aren’t the best WindowInsets to use but they get the job done for this demo).

If you don’t do anything else, the sheet content will go behind the navigation bar, because it doesn’t take count of its insets, so we wrap the content in a Column and apply the Modifier.padding(bottom = bottomPadding) modifier to it.
The bottomPadding is calculated outside of the Column scope via WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding().
If we were to call this method inside the ModalBottomSheet we would not get a valid padding since those insets have already been consumed.

Here is the improved ModalBottomSheet:

Source code

You can find the full code for the demo in this article on my GitHub repo (link to the exact file)

Hope this helped ^^