About

Android Compose wheel picker library based on LazyColumn in vertical and LazyRow in horizontal.

Sample

Default

FVerticalWheelPicker(
   modifier = Modifier.width(60.dp),
   // Specified item count.
   count = 50,
) { index ->
   Text(index.toString())
}

Item size

FVerticalWheelPicker(
   // ......
   // Specified item height.
   itemHeight = 60.dp,
) {
   // ......
}

Unfocused count

FVerticalWheelPicker(
   // ......
   // Specified unfocused count.
   unfocusedCount = 2,
) {
   // ......
}

Custom divider

FVerticalWheelPicker(
   // ......
   focus = {
      // Custom divider.
      FWheelPickerFocusVertical(dividerColor = Color.Red, dividerSize = 2.dp)
   },
) {
   // ......
}

Custom focus

FVerticalWheelPicker(
   // ......
   // Custom focus.
   focus = {
      Box(
         modifier = Modifier
            .fillMaxSize()
            .border(width = 1.dp, color = Color.Gray)
      )
   },
) {
   // ......
}

Scroll to index

// Specified initial index.
val state = rememberFWheelPickerState(10)
LaunchedEffect(state) {
   delay(2000)
   // Scroll to index.
   state.animateScrollToIndex(20)
}

FVerticalWheelPicker(
   // ......
   // state
   state = state,
) {
   // ......
}

Observe index

• FWheelPickerState.currentIndex - Index of picker when it is idle.
• FWheelPickerState.currentIndexSnapshot - Index of picker when it is idle or scrolling but not fling.

val state = rememberFWheelPickerState()
FVerticalWheelPicker(
   // ......
   // state
   state = state,
) {
   // ......
}

// Observe currentIndex.
LaunchedEffect(state) {
   snapshotFlow { state.currentIndex }
      .collect {
         Log.i(TAG, "currentIndex ${state.currentIndex}")
      }
}

// Observe currentIndexSnapshot.
LaunchedEffect(state) {
   snapshotFlow { state.currentIndexSnapshot }
      .collect {
         Log.i(TAG, "currentIndexSnapshot ${state.currentIndexSnapshot}")
      }
}

Custom display

FVerticalWheelPicker(
   // ......
   // Content display
   display = { index ->
      if (state.currentIndexSnapshot == index) {
         content(index)
      } else {
         // Modify content if it is not in focus.
         Box(
            modifier = Modifier
               .rotate(90f)
               .alpha(0.5f)
         ) {
            content(index)
         }
      }
   }
) {
   // ......
}

Reverse layout

FVerticalWheelPicker(
   // ......
   // Reverse layout.
   reverseLayout = true,
) {
   // ......
}

Horizontal

FHorizontalWheelPicker is almost the same as FVerticalWheelPicker.

FHorizontalWheelPicker(
   modifier = Modifier.height(60.dp),
   // Specified item count.
   count = 50,
) { index ->
   Text(index.toString())
}