Using .shadow with Button in jetpack compose causes an issue

Question

I want to use the .shadow operator to add a shadow to my button, but as you can see in the image, I got a white background.

Answer 1

As many Modifiers in Jetpack Compose order of Modifier.shadow() matters. use shadow first.

Button(
    modifier = Modifier
        .shadow(2.dp, RoundedCornerShape(2.dp))
        .height(36.dp),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

vs

Button(
    modifier = Modifier
        .height(36.dp)
        .shadow(2.dp, RoundedCornerShape(2.dp)),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

But this is not how you set elevation for button. This is for demonstrating how Modifier.shadow() order changes outcome, maybe helpful with some Composables but with Button you need to use

Button(
    modifier = Modifier.height(36.dp),
    shape = RoundedCornerShape(2.dp),
    elevation = ButtonDefaults.elevation(...),
    onClick = { /*TODO*/ }) {
    Text("Button")
}

and elevation function has properties for different states such as

  @Composable
    fun elevation(
        defaultElevation: Dp = 2.dp,
        pressedElevation: Dp = 8.dp,
        disabledElevation: Dp = 0.dp,
        hoveredElevation: Dp = 4.dp,
        focusedElevation: Dp = 4.dp,
    )