Jetpack Compose DashedDivider

DashedDivider.kt

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun DashedDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = 1.dp,
    color: Color = MaterialTheme.colors.onSurface,
    phase: Float = 15f,
    intervals: FloatArray = floatArrayOf(15f, 15f),
) {
    Canvas(
        modifier = Modifier
            .height(thickness)
            .then(modifier)
    ) {
        drawLine(
            color = color,
            strokeWidth = thickness.toPx(),
            start = Offset(0f, size.height / 2f),
            end = Offset(size.width, size.height / 2f),
            pathEffect = PathEffect.dashPathEffect(
                intervals = intervals,
                phase = phase
            )
        )
    }
}

@Preview
@Composable
private fun DashedDividerPreview() {
    DashedDivider(
        color = Color.Black,
        thickness = 1.dp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    )
}