Jetpack Compose : Scrollable column with fractions

Question

I have 3 elements in a column.

I want the 1st element to take 50% of screen and the remaining to take rest of space or scroll if needed.

I have tried the following:

• Using verticallScroll() with fractions is not working. If i disable verticallScroll() then the 1st element takes 50% of the screen but the screen does not scrolls if needed.

   Column( modifier = Modifier.background(color = Color.Black).padding(horizontal = 15.dp).verticalScroll(state = rememberScrollState(), enabled = true).fillMaxSize() ) { QuickTipsCard( modifier = Modifier.fillMaxWidth().fillMaxHeight(0.5f), backgroundColor = LightBlue, title = "Good morning,", description = "0 out of 10 task today". titleStyle = Typography.h1 )

  }

Answer 1

You can wrap the Column in a BoxWithConstraints component and use the maxHeight property to calculate the desired heights for the elements in the column.