Jetpack Compose horizontal fading edges with ScrollableState.

Modifier.drawHorizontalFadingEdges.kt

@Stable
fun Modifier.drawHorizontalFadingEdges(
  target: Color = Color.White,
  width: Dp = 10.dp,
  scrollState: ScrollableState,
) =
  if (!scrollState.canScrollForward && !scrollState.canScrollBackward) this
  else drawWithCache {
    val gradientWidth = width.toPx()

    val startGradientColors = listOf(target, Color.Transparent)
    val endGradientColors = listOf(Color.Transparent, target)

    val startGradientBrush =
      Brush.linearGradient(
        colors = startGradientColors,
        start = Offset(x = 0f, y = size.height), // why not Offset.Zero?
        end = Offset(x = gradientWidth, y = size.height),
      )
    val endGradientBrush =
      Brush.linearGradient(
        colors = endGradientColors,
        start = Offset(x = size.width - gradientWidth, y = size.height),
        end = Offset(x = size.width, y = size.height),
      )

    onDrawWithContent {
      drawContent()
      if (scrollState.canScrollBackward) drawRect(brush = startGradientBrush, size = size)
      if (scrollState.canScrollForward) drawRect(brush = endGradientBrush, size = size)
    }
  }