How to add a bottom padding on the ModalBottomSheet to make the navigation bar not overlap it when edge to edge is enabled or hide it?

Question

I'm trying to make my app completely full screen, navigation bar and status bar are always hidden, but when the ModalBottomSheet is showed the navigation bar reappear, and I can't get rid of it neither set a padding to not have the content (of the ModalBottomSheet) overlaid by the system navigation bar. I'm using enableEdgeToEdge(). I tried to use .navigationBarsPadding() modifier on a column inside the sheet but doesn't work, I tried to simply add a Spacer at the end of the sheet but WindowInsets.navigationBars.getBottom(this).toDp() returns 0.dp

I don't know if is useful but this is my theme.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Test" parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
</resources>

This is my current screen code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Screen() {

    var showBottomSheet by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            // ...
        },
        bottomBar = {
            BottomAppBar(
                windowInsets = WindowInsets(0, 0, 0, 0)
            ) {
                // ...
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues = paddingValues).fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(16.dp, alignment = Alignment.CenterVertically),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ElevatedButton(onClick = { showBottomSheet = true }) {
                Text(text = "Show Bottom Sheet")
            }
        }
    }

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = { showBottomSheet = false },
            modifier = Modifier.navigationBarsPadding(),
            windowInsets = WindowInsets(0, 0, 0, 0)
        ) {
            Text(text = loremIpsumText)

            /*Column(
                modifier = Modifier.navigationBarsPadding(),
            ) {
                Text(text = loremIpsumText)
            }*/

            /*Spacer(
                modifier = Modifier
                    .height(
                        with(LocalDensity.current) {
                            WindowInsets.navigationBars.getBottom(this).toDp()
                        }
                    )
            )*/
        }
    }
}

This is the result of the code above, as you can see the navigation bar overlaps the content of the sheet.

If I remove windowInsets = WindowInsets(0, 0, 0, 0) in the ModalBottomSheet then the sheet go above the nav bar but the bottom app bar is visible, so not good:

My goal is to have one of these: (sheet content above navigation bar or system nav bar removed)

Thanks.

UPDATE

I found a workaround, a simple variable like this to get the height of the navigation bar:

val navigationBarHeight = with(LocalDensity.current) {
    WindowInsets.navigationBars.getBottom(this).toDp()
}

and then a Spacer() at the end of the ModalBottomSheet:

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false },
    windowInsets = WindowInsets(0, 0, 0, 0)
) {
    Text(text = loremIpsumText)
    Spacer(modifier = Modifier.height(navigationBarHeight))
}

It works, but I think navigationBarHeight create overhead during recompositions.

Trilingual