HomeHeader.kt

@Composable
private fun HomeHeader(
    ...
) {
    Box {
        val density = LocalDensity.current
        // How big the curved section of the box is
        val backgroundBottomPadding = 96.dp
        // How much spacing you have between the content inside your box and the content placed below it
        val bottomSpacer = 16.dp
        // Set to 264.dp initilly just so the calculatation below doesn't result in a negative number
        var boxHeight by remember { mutableStateOf(264.dp) }
        val contentTopPadding by remember {
            derivedStateOf { boxHeight - backgroundBottomPadding + bottomSpacer }
        }

        Column(
            modifier = Modifier
                .fillMaxWidth()
                // Code that draws the curved background
                .background(remember {
                    Brush.verticalGradient(listOf(Purple40, Purple20))
                }, remember {
                    SemiOvalShape()
                })
                .padding(horizontal = 16.dp)
                .onSizeChanged {
                    boxHeight = with(density) { it.height.toDp() }
                }
        ) {
            ... // The content that's shown inside the box goes here (Welcome Back, Income/Expenses)
          
            Spacer(modifier = Modifier.height(backgroundBottomPadding))
        }

        Box(
            modifier = Modifier
                .padding(top = contentTopPadding)
                .fillMaxWidth()
        ) {
            ... // The content that's shown below the box goes here (Add Expense, Add Income, ...)
        }
    }
}