State of Compose 2023 results are in! Click here to learn more

← Back to Wear Material

Picker

Component
in
Wear Material
. Since 1.0.0

Overview

Code Examples

A scrollable list of items to pick from. By default, items will be repeated "infinitely" in both directions, unless PickerState#repeatItems is specified as false.

Example of a simple picker to select one of five options:

Overloads

Picker

@Suppress("DEPRECATION")
@Deprecated("This overload is provided for backwards compatibility with Compose for Wear OS 1.0." +
  "A newer overload is available with additional contentDescription, onSelected and " +
  "userScrollEnabled parameters, which improves accessibility of [Picker].")
@Composable
public fun Picker(
    state: PickerState,
    modifier: Modifier = Modifier,
    readOnly: Boolean = false,
    readOnlyLabel: @Composable (BoxScope.() -> Unit)? = null,
    scalingParams: androidx.wear.compose.material.ScalingParams = PickerDefaults.scalingParams(),
    separation: Dp = 0.dp,
    @FloatRange(from = 0.0, to = 0.5)
    gradientRatio: Float = PickerDefaults.DefaultGradientRatio,
    gradientColor: Color = MaterialTheme.colors.background,
    flingBehavior: FlingBehavior = PickerDefaults.flingBehavior(state),
    option: @Composable PickerScope.(optionIndex: Int) -> Unit
)

Parameters

NameDescription
stateThe state of the component
modifierModifier to be applied to the Picker
readOnlyDetermines whether the Picker should display other available options for this field, inviting the user to scroll to change the value. When readOnly = true, only displays the currently selected option (and optionally a label). This is intended to be used for screens that display multiple Pickers, only one of which has the focus at a time.
readOnlyLabelA slot for providing a label, displayed above the selected option when the Picker is read-only. The label is overlaid with the currently selected option within a Box, so it is recommended that the label is given Alignment.TopCenter.
scalingParamsThe parameters to configure the scaling and transparency effects for the component. See ScalingParams
separationThe amount of separation in Dp between items. Can be negative, which can be useful for Text if it has plenty of whitespace.
gradientRatioThe size relative to the Picker height that the top and bottom gradients take. These gradients blur the picker content on the top and bottom. The default is 0.33, so the top 1/3 and the bottom 1/3 of the picker are taken by gradients. Should be between 0.0 and 0.5. Use 0.0 to disable the gradient.
gradientColorShould be the color outside of the Picker, so there is continuity.
flingBehaviorlogic describing fling behavior.
optionA block which describes the content. Inside this block you can reference PickerScope.selectedOption and other properties in PickerScope. When read-only mode is in use on a screen, it is recommended that this content is given Alignment.Center in order to align with the centrally selected Picker value