how do I make VerticalDivider a dotted line ?

# compose

[0xf1f1]

how do I make VerticalDivider a dotted line ?

[Sean Proctor]

You can't with the version from M3, here's one you can pass a pathEffect to.

@Composable
fun VerticalDivider(
    pathEffect: PathEffect,
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
) = Canvas(modifier.fillMaxHeight().width(thickness)) {
    drawLine(
        color = color,
        strokeWidth = thickness.toPx(),
        start = Offset(thickness.toPx() / 2, 0f),
        end = Offset(thickness.toPx() / 2, size.height),
        pathEffect = pathEffect,
    )
}

VerticalDivider(PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)

[0xf1f1]

thanks - how do I set the radious for each dot ?

[Sean Proctor]

I just searched how to make a dotted line and found this: https://stackoverflow.com/questions/68789204/how-do-i-make-a-dotted-dashed-line-in-jetpack-compose