Hi everyone :slightly_smiling_face: Looking to reproduce this design: With the very small gradient a...

# compose

[Jérémy CROS]

Hi everyone 🙂
Looking to reproduce this design:
With the very small gradient at the end so that our users understand the text can be scrolled
The closest i've been to the result so far is:

style = AppTheme.typography.instructionText.copy(
    Brush.verticalGradient(
        listOf(AppTheme.colors.contentPrimary, Color.Transparent)
    )
)

But the gradient is applied linearly on the whole text, not just the end
Figured I should be able to use startY and endY parameters but I can't seem to be able to understand how they work...
Or maybe I'm not using the proper gradient?
Any help appreciated 🙂

[Rebecca Franks]

You could place a box on top that does a DstIn blendMode - something like this

@Composable
fun FadedEdgeDemo(modifier: Modifier, content: @Composable () -> Unit) {
    Box(modifier = modifier
        .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
        .drawWithContent {
            drawContent()
            drawRect(
                brush = Brush.verticalGradient(listOf(Color.Black, Color.Transparent)),
                blendMode = BlendMode.DstIn
            )
        }) {
        content()
    }
}

[Jérémy CROS]

Hello @Rebecca Franks
Took me a few tries to understand the example and how to apply that to my view 😅
But it's now working perfectly, thank you very much! 🙏