🌈 Create new beautiful Compose Gradients with our new wesite ->

ScrollField

Kotlin 
@Composable

fun ScrollFieldSample() {
    val minVal = 1000
    val maxVal = 2000
    val itemCount = (maxVal - minVal) + 1

    val state = rememberScrollFieldState(itemCount = itemCount, index = 0)
    var selectedValue by remember { mutableIntStateOf(minVal) }

    Row(
        modifier =
            Modifier.background(
                    MaterialTheme.colorScheme.surfaceContainerHighest,
                    RoundedCornerShape(28.dp),
                )
                .padding(12.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        ScrollField(
            state = state,
            modifier = Modifier.size(width = 192.dp, height = 160.dp),
            contentDescription = "Select value between 1000 and 2000",
            fieldAccessibilityDescription = { index -> (minVal + index).toString() },
            field = { index, isSelected ->
                val valueToShow = minVal + index
                Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.Center) {
                    Text(
                        text = valueToShow.toString(),
                        style =
                            if (isSelected) {
                                MaterialTheme.typography.displayLargeEmphasized
                            } else {
                                MaterialTheme.typography.displayMedium
                            },
                        color =
                            if (isSelected) {
                                MaterialTheme.colorScheme.onSurface
                            } else {
                                MaterialTheme.colorScheme.outline
                            },
                    )
                }
            },
        )
    }
}
View All