compose-multiplatform
compose-multiplatform copied to clipboard
Wrong shadow for complex Path
If we use a hand-maded Path for drawing shadow then the shadow will not match actual Path (we can see a white fragment outside the box).
Example (under the floating button):

Scaffold(
floatingActionButton = {
ExtendedFloatingActionButton(
text = { Text("BUTTON") },
onClick = {
println("Floating button clicked")
}
)
},
isFloatingActionButtonDocked = true,
bottomBar = {
BottomAppBar(cutoutShape = CircleShape) {
IconButton(
onClick = {}
) {
Icon(Icons.Filled.Menu, Modifier.size(ButtonConstants.DefaultIconSize))
}
}
},
bodyContent = {}
)
Snippet to reproduce:
import androidx.compose.desktop.AppWindow
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.drawLayer
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
fun main() {
AppWindow("Test", IntSize(1224, 850)).show {
// val shape = RectangleShape
val shape = object : Shape {
override fun createOutline(size: Size, density: Density): Outline {
val path = Path().apply {
moveTo(0f, 0f)
lineTo(size.width * 0.97f, 0f)
lineTo(size.width, size.height / 2f)
lineTo(size.width, size.height)
lineTo(0f, size.height)
}
return Outline.Generic(path)
}
}
Box(
Modifier
.fillMaxWidth(0.9f)
.height(200.dp)
.drawLayer(shadowElevation = 45f, shape = shape)
.background(color = Color.Blue.copy(alpha = 0.5f), shape = shape)
) {}
}
}

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.