Modifier

Conditional Modifier

fun Modifier.conditional(condition: Boolean, modifier: Modifier.() -> Modifier): Modifier {
    return if (condition) then(modifier(Modifier)) else this
}

onGloballyPositioned

Retrieve widget layout (width, height)

Modifier.onGloballyPositioned {
    textWidth = it.size.width // Int
}

Scrollable Column or Row

Use .verticalScroll() or .horizontalScroll()

val state = rememberScrollState()

Column(Modifier.verticalScroll(state)){

}

After binding the state, use .animateScrollTo() to scroll to a location with animation

size & requiredSize

requiredSize	size
Force to set the size no matter what	Respect parent layout size, if overflow then fit in the parent layout

Box(modifier = Modifier.size(100.dp))

Box(modifier = Modifier.requiredSize(100.dp))

zIndex

Same as z-index in CSS, allows you to change the layer of composables

Modifier.zIndex(1f)
Modifier.zIndex(2f) // <- higher layer

Weight

weight() takes the remaining space of the composables

Modifier.weight(1f)

@Composable
fun WeightExample() {
    Column(modifier = Modifier.fillMaxHeight().systemBarsPadding()) {
        Row(modifier = Modifier.fillMaxWidth().height(50.dp)) {
            Text(text = "Weight 2",
                modifier = Modifier.weight(2f)
                    .background(Color.Red).padding(8.dp))
            Text(text = "Weight 2",
                modifier = Modifier.weight(2f)
                    .background(Color.Green).padding(8.dp))
            Text(text = "Weight 3",
                modifier = Modifier.weight(3f)
                    .background(Color.Blue).padding(8.dp))
        }
        Row(modifier = Modifier.fillMaxWidth().height(50.dp)) {
            Text(text = "Weight 2",
                modifier = Modifier.weight(2f)
                    .background(Color.Yellow).padding(8.dp))
            Text(text = "Weight 1",
                modifier = Modifier.weight(1f)
                    .background(Color.Cyan).padding(8.dp))
        }
    }
}

Border

Modifier.border(2.dp, Color.Green, CircleShape)

Safe Area

For all bars (bottom nav controller & topbar)

Modifier.windowInsetsPadding(WindowInsets.systemBars)
// or
Modifier.systemBarsPadding()

For only top bar

Modifier.windowInsetsPadding(WindowInsets.statusBars)

Rounded

For Object

Modifier.clip(RoundedCornerShape(20))

RoundedCornerShape() also accepts CircleShape

For Border

Modifier.border(1.dp, Color.Red, RoundedCornerShape(20))

Gradient

For Background

Brush.linearGradient(listOf(Color.Red, Color.White))

Text Color Gradient

Text(
    text = "Hello Gradient",
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = listOf(Color.Red, Color.Blue),
        ),
        fontSize = 50.sp
    )
)

Gradient Directions

Method	Direction
linearGradient	topLeft → bottomRight
horizontalGradient	Left → Right
verticalGradient	Top → Bottom

Shadow

Box(
    modifier = Modifier
        .padding(top = 50.dp)
        .size(200.dp)
        .shadow(
            elevation = 8.dp, // the height of the shadow
            shape = RoundedCornerShape(16.dp), // border radius of the box
            clip = false // whether not the
        )
        .background(
            Color.White
        )
) {
    Text("Hello Shadow", modifier = Modifier.align(Alignment.Center))
}