Hi, is there any way to add this kind of fade out effect in TextField in horizontal direction?

# compose

[Utkarsh Tiwari]

Hi, is there any way to add this kind of fade out effect in TextField in horizontal direction?

[Abhinav Suthar]

One hacky solution I can think of is that you can cover your TextField with another view with horizontal gradient background with alpha ranging from 1 to 0

[Chris Sinco [G]]

Indeed a draw Modifier would work. This is how one can achieve scrims in general

[Albert Chang]

You can make use of BlendMode so that you don’t need to use different colors for light/dark themes:

Text(
    text = Text,
    modifier = Modifier
        .graphicsLayer(alpha = 0.99f)
        .drawWithCache {
            val brush = Brush.verticalGradient(listOf(Color.Transparent, Color.Black))
            onDrawWithContent {
                drawContent()
                drawRect(brush, blendMode = BlendMode.DstOut)
            }
        }
)