Trying to increase the font size of numbers and adding padding between numbers and horizontal lines.

Hello!

Consider making this component accessible meaning that it could be used with e.g. TalkBack and keyboards/Dpads. The picker doesn't seem to work on either currently.

So currently the picker only seems to work vertically, you can scroll the items up and down.

But maybe it would be cool to enable left and right scrolling instead for the picker?

Just an idea, Happy to pick this up and try and have a go at implementing this option if thats ok with you?

See the resulting flickering behavior when the spinner switches values.

To reproduce it, upgrate to latest compose by adding this to your build.gradle.kts. Any version of compose greater than 1.3.3 has the same behavior

    implementation(platform("androidx.compose:compose-bom:2023.05.01"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-tooling")
    implementation("androidx.compose.foundation:foundation")
    implementation("androidx.compose.material:material")
    implementation("androidx.compose.material:material-icons-core")
    implementation("androidx.compose.material:material-icons-extended")
    implementation("androidx.compose.runtime:runtime-livedata")
    implementation("androidx.activity:activity-compose:1.5.1")
``` `

Hello!

I see that you don't use any platform specific features, could you please add multiplatform support.

similar suggestion: #4

As the font size of the items increases via the textStyle parameter, the values and lines above and below the center value get further and further away from their expected locations. (Adding lineHeight to the TextStyle makes no difference.)

Reference Code:

    val possibleValues = (1945..1975).map { it.toString() }
    var state by remember { mutableStateOf(possibleValues[8]) }
    Spacer(modifier = Modifier.height(40.dp))
    ListItemPicker(
        label = { it },
        list = possibleValues,
        value = state,
        onValueChange = { state = it },
        textStyle = TextStyle(fontSize = 36.sp, fontWeight = FontWeight.Normal),
    )

Result at 16.dp font size:

Result at 24.dp font size:

Result at 36.dp font size:

Example, I display hours minutes seconds to allow the user to enter the duration of a piece of media. They can perform searches on how long a song is - show me all songs over 10 minutes.

For my seconds picker I give the range -1..60. My label function emits an empty string for -1 and 60. When the picker hits 60, I increment my "minutes" and set the "seconds" picker value to 0. Effectively the change is from 0:0:59 to 0:1:0. Works nicely with little effort on my part. The opposite does not work as the picker can never go below 0.

If I set a picker to -1..N, it will display -1 as the smallest value but does not allow me to move to that number. I've only glanced at the code, but could the picker possibly be genericized to work over any ClosedRange using start, endInclusive, and step functions? I'm only concerned with numbers at the moment, but seems this could be an even more versitale widget - a range value picker.

Thanks for publishing this. Very useful as is.

Minutes should display a leading 0 for minutes less than 10 (e.g. 12:05 PM, not 12:5 PM) could apply to 24 hour format as well (14:05, not 14:5)

Hi.
I want a NumberPicker for compose desktop .

Do you any idea?

Thanks for this handy library. It would be great if you could add an open-source license to allow using it. Some candidates may be the MIT or Apache 2 licenses.

Some pointers:

• Github docs: Licensing a repository
• Github docs: Adding a license to a repository
• MIT License
• Apache 2 License

Hi, I need to decrease the height. How can I do that?

There is currently no license on this project so it's unknown on the legality of using this code in other projects. Please add one so others can know what is possible to do with this code.

Layout bug when in ConstraintLayout (compose)

Here is the screenshot:

Attached my compose layout code:

ConstraintLayout(
                    modifier = Modifier.fillMaxSize(),
                ) {
                    val (title, picker, btn) = createRefs()
                    var pickerValue by remember { mutableStateOf(2) }
                    Text(text = "Select Next No of People", modifier = Modifier.constrainAs(title) {
                        centerHorizontallyTo(parent)
                        top.linkTo(parent.top)
                    })
                    NumberPicker(
                        modifier = Modifier
                            .constrainAs(picker) {
                                centerHorizontallyTo(parent)
                                top.linkTo(title.bottom)
                            }
                            .size(100.dp, 200.dp),
                        value = pickerValue,
                        range = 0..10,
                        dividersColor = Color.Cyan,
                        onValueChange = {
                            pickerValue = it
                        }
                    )

                    Button(onClick = { /*TODO*/ }, modifier = Modifier.constrainAs(btn) {
                        centerHorizontallyTo(parent)
                        bottom.linkTo(parent.bottom)
                    }) {
                        Text(text = "Click")
                    }
                }

"Repeat" Boolean property that if true, will loop back to the bottom of the picker at the top of the picker and vice versa if the picker is at the bottom, similar to a never-ending carousel. (Once the beginning/end is reached, the end/beginning of the list will be the next value in display, instead of having to scroll all the way back to the desired point of the list.)

Hi,

In order to solve all style implementation you should use the slot Api pattern for your component :

@Composable
fun <T> ListItemPicker(
    modifier: Modifier = Modifier,
    pickerState = rememberPickerState()
    item: @Composable (T) -> Unit
)

https://chris.banes.dev/slotting-in-with-compose-ui/