How to get Jetpack Compose's LazyGrid to render behind system bars?

Issue

I’m trying to use Accompanist’s System UI Controller library along with WindowCompat.setDecorFitsSystemWindows(window, false) to render content behind a device’s system UI.

I’d like to also use Jetpack Compose’s inset paddings to add some pad the top of its LazyVerticalGrid, however the grid doesn’t render behind the system bars if I give it a padding with Modifier.statusBarsPadding().

@Composable
fun libraryScreen(navController: NavController) {
  Surface(
    color = Color.Magenta,
    modifier = Modifier.fillMaxWidth()
  ) {
    Column(
      modifier = Modifier
        .fillMaxWidth()
        .padding(
          horizontal = 10.dp
        )
    ) {
      LazyVerticalGrid(
        columns = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        modifier = Modifier
          .background(color = Color.Black)
//        .statusBarsPadding()
      ) {
        items(40) {
          albumCard("TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE ", "ARTIST ARTIST ARTIST ARTIST ARTIST ARTIST ARTIST ")
        }
      }
    }

  }
}

Comparison GIFs:

Without any padding

With padding

The same effect happens if I use a Box or Spacer above the grid.

Solution

Accompanist insets are deprecated use WindowInsets library.

  contentPadding = WindowInsets.systemBars
                .only(WindowInsetsSides.Vertical)
                // Add if you want to have extra padding with your grid, optional
                .add(
                    WindowInsets(left = 8.dp, right = 8.dp, top = 16.dp, bottom = 16.dp)
                )
                .asPaddingValues(),

add will add extra padding initial padding and will scroll below status bar and navigation bar when you scroll your grid

Surface(Modifier) {
    LazyVerticalGrid(
        contentPadding = WindowInsets.systemBars
            .only(WindowInsetsSides.Vertical)
            .add(
                WindowInsets(left = 8.dp, right = 8.dp, top = 16.dp, bottom = 16.dp)
            )
            .asPaddingValues(),
        modifier = Modifier
            .fillMaxSize()
            .background(backgroundColor),
        columns = GridCells.Fixed(3),
        content = {
            items(snacks) { snack: Snack ->
                GridSnackCard(snack = snack)
            }
        }
    )
}
                    

Answered By – Thracian

Answer Checked By – Marilyn (FlutterFixes Volunteer)