Right now I’m doing something like

@Composable
fun MyBox() {
  Box {
    val density = LocalDensity.current
    var bottomAnchoredItemHeight by remember { mutableStateOf(0.dp) }
    SomeScrollableContent(bottomAnchoredItemHeight, Modifier.fillMaxSize())
    BottomAnchoredItem(
      Modifier
        .align(Alignment.BottomCenter)
        .onPlaced { layoutCoordinates ->
          bottomAnchoredItemHeight = with(density) { layoutCoordinates.size.height.toDp() }
        },
    )
  }
}

@Composable
fun SomeScrollableContent(bottomAnchoredItemHeight: Dp, modifier: Modifier = Modifier) {
  Column(Modifier.verticalScroll(rememberScrollState()).padding(bottom = bottomAnchoredItemHeight)) {}
}

But since I’m relying on

onPlaced

to change some state this happens 1 frame late, and in general makes me feel like I’m missing a better approach.

unless your anchored item is partially transparent and you want to scroll behind it, is that what you want?

but I've heard it comes with a performance penalty, so you might be better off with your 1 frame delay implementaion

One interesting thing here regarding insets. Before I had

.windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom))

on my ScrollableContent too, in order to avoid the bottom bar, but since I’m doing that in my

BottomAnchoredItem

too, now that spacing is part of

paddingValues

provided by the Scaffold, it double applies that value 🙈 But then I remember you were doing something like this in the episode, so I tried adding

consumedWindowInsets

as a modifier to my scaffold.

Scaffold(
  bottomBar = {
    BottomAnchoredItem(
      modifier = Modifier
        .windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal))
        .padding(16.dp),
    )
  },
  modifier = Modifier.consumedWindowInsets(
    WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal),
  )
) { paddingValues ->

This did not work as that now also consumed the paddings that the

BottomAnchoredItem

wanted to use. Moved that modifier down to the one child of the

Scaffold

content

val bottomAnchoredButtonInsets = WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal)
Scaffold(
  bottomBar = {
    BottomAnchoredItem(
      modifier = Modifier
        .windowInsetsPadding(bottomAnchoredButtonInsets)
        .padding(16.dp),
    )
  },
  modifier = Modifier.consumedWindowInsets(bottomAnchoredButtonInsets)
) { paddingValues ->
  Box(Modifier.consumedWindowInsets(WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal))) {}
}

And what do you know, this does work 🤯🤯🤯🤯 without having to go in that other composable and remove the insets in case idk, this changes sometime, or reusing that other component somewhere else etc. I guess this was not an exaggeration after all, that CWTI episode taught me so much about the inset APIs, I never would’ve even thought of doing smth like this before. Thanks a lot for that and the help here Alex! 🙌

Ouch, but then when on landscape mode, since I was consuming the horizontal insets too, the content was drawing behind the navigation bar. Since the

bottomBar

content on the Scaffold is not rotating with the phone obviously, I still need the horizontal paddings to propagate down to the child. Fixed it now by making the insets passed to

consumedWindowInsets

only take the

WindowInsetsSides.Bottom

so only considering those as consumed. Starting to get a bit tricky at this point, but I think I’m done now 😂 It all seems to work just fine.

As a side question, I see that the

consumedWindowInsets

is considered experimental now. Could you share why that is? Is the API surface still being considered as unstable, or are there any known issues with it or something else?