How to Create a Custom Pattern Lock using Jetpack Compose?

Question

I'm working on developing an Android app, and I want to implement a custom pattern lock feature using Jetpack Compose. I'd like users to be able to draw a pattern by connecting a sequence of dots on the screen. This pattern will then be used as a form of authentication.

I'm looking for guidance on how to approach this in terms of Jetpack Compose components, gesture handling, and UI interaction. Specifically, I'd like to achieve the following:

• Allow users to draw a pattern by dragging their finger across a grid of dots.
• Highlight the dots that are part of the drawn pattern.
• Provide feedback when the pattern is being drawn.
• Verify the pattern against a saved pattern for authentication.

Can anyone provide insights or code snippets on how to achieve these functionalities? I'd appreciate any tips, resources, or examples that could help me get started with creating a polished and user-friendly custom pattern lock using Jetpack Compose.

Thank you in advance!

I tried the foolowing code but it doesn't work for me.

@Composable
fun PatternLockUI(pattern: String) {
    val cellSize = 80.dp
    val padding = 16.dp

    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        val selectedCells = pattern.map { it.toString().toInt() }

        for (row in 0 until 3) {
            for (col in 0 until 3) {
                val x = col * (cellSize + padding)
                val y = row * (cellSize + padding)
                val index = row * 3 + col + 1
                val isSelected = selectedCells.contains(index)

                Box(
                    modifier = Modifier
                        .size(cellSize)
                        .padding(padding)
                        .offset(x.dp, y.dp)
                ) {
                    Canvas(
                        modifier = Modifier.fillMaxSize()
                    ) {
                        drawCircle(
                            color = if (isSelected) Color.Blue else Color.Gray,
                            radius = size.minDimension / 8,
                            center = Offset(size.width / 2, size.height / 2),
                        )
                    }

                    if (col < 2) {
                        val nextIndex = row * 3 + col + 2
                        if (isSelected && selectedCells.contains(nextIndex)) {
                            drawLine(
                                color = Color.Blue,
                                start = Offset(x + cellSize.toPx(), y + cellSize.toPx()) / 2,
                                end = Offset(x + cellSize.toPx() + padding.toPx(), y + cellSize.toPx()) / 2,
                                strokeWidth = 4.dp.toPx(),
                            )
                        }
                    }

                    if (row < 2) {
                        val nextIndex = (row + 1) * 3 + col + 1
                        if (isSelected && selectedCells.contains(nextIndex)) {
                            drawLine(
                                color = Color.Blue,
                                start = Offset(x + cellSize.toPx() / 2, y + cellSize.toPx()) / 2,
                                end = Offset(x + cellSize.toPx() / 2, y + cellSize.toPx() + padding.toPx()) / 2,
                                strokeWidth = 4.dp.toPx(),
                            )
                        }
                    }
                }
            }
        }
    }
}