```Box( modifier = Modifier .preferred...

# compose

[caelum19]

Box(
    modifier = Modifier
        .preferredSize(500.dp, 500.dp)
        .drawBackground(
            HorizontalGradient(
                0.0f to Color.Red,
                0.5f to Color.Green,
                1.0f to Color.Blue,
                startX = Px.Zero,
                endX = 500.dp.toPx()
            )
        )
)

I'd like for a gradient's end to match the parent's width - is there a nicer way to do this?

[Zach Klippenstein (he/him) [MOD]]

You could try WithConstraints

[Kazemihabib1996]

Box(
    modifier = Modifier
        .fillMaxSize() // for example
        .plus(
            object : DrawModifier {
                override fun ContentDrawScope.draw() {
                    drawRect(
                        HorizontalGradient(
                            0.0f to Color.Red,
                            0.5f to Color.Green,
                            1.0f to Color.Blue,
                            startX = Px.Zero,
                            endX = size.width.toDp().toPx()
                        )
                    )
                    drawContent()
                }
            }
        )
)

[caelum19]

Thanks both of you 🙂
this works great:

WithConstraints() {
        Box(
            modifier = Modifier
                .preferredSize(500.dp, 500.dp)
                .drawBackground(
                    HorizontalGradient(
                        0.0f to Color.Red,
                        0.3f to Color.Green,
                        1.0f to Color.Blue,
                        startX = Px.Zero,
                        endX = constraints.maxWidth.toPx()
                    )
                )
        ) {
        }
    }

[Ali Kabiri]

Seems like this is deprecated. Does anyone know the alternative? 🙂

[Ali Kabiri]

found it haha:

val gradient = Brush.horizontalGradient(
            colors = listOf(
                startColor,
                endColor
            ),
            startX = 0f,
            endX = size.value * 2.625f * fill
        )

Box(
            modifier = Modifier
                .background(
                    brush = gradient
                )
    ) {}

[caelum19]

What's the deal with the 2.625f ?