IssueTracker

Right now, Scaffold, bottom navigation, and app bars for material and material3 don't nicely work with insets.

This is because insets want to apply padding around the content of these items, while still including that padding in the drawing of the surface.

Taking BottomNavigation as the simplest example, the current implementation looks like this:

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation,
        modifier = modifier
    ) {
        Row(
            Modifier // <-- insets want to apply padding here, inside of the Surface
                .fillMaxWidth()
                .height(BottomNavigationHeight)
                .selectableGroup(),
            horizontalArrangement = Arrangement.SpaceBetween,
            content = content
        )
    }
}

Per discussion, the most straightforward approach forward is to allow developers to independently use the surface and the content, independently. Thus, the proposed new implementation would look like this (also preserving backwards-compatability):

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit,
) {
    BottomNavigationSurface(modifier, backgroundColor, contentColor, elevation) {
        BottomNavigationContent {
            content()
        }
    }
}

@Composable
fun BottomNavigationSurface(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable () -> Unit
) {
    Surface(
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation,
        modifier = modifier,
    ) {
        content()
    }
}

@Composable
fun BottomNavigationContent(
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit,
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .height(BottomNavigationHeight)
            .selectableGroup(),
        horizontalArrangement = Arrangement.SpaceBetween,
        content = content,
    )
}

This opens up the ability for insets usage like this:

BottomNavigationSurface(
    backgroundColor = MaterialTheme.colors.surface.copy(alpha = 0.95f),
) {
    BottomNavigationContent(
        modifier = Modifier.navigationBarsPadding()
    ) {
        BottomNavigationItem(/* ... */)
        BottomNavigationItem(/* ... */)
        BottomNavigationItem(/* ... */)
        BottomNavigationItem(/* ... */)
    }
}

The resolution of this issue would allow for the deprecation of accompanist/insets-ui.