A modern programming language that makes developers happier.

kotlinlang

Screenshot 2023-06-13 at 17.49.11.png

Why doesn't `drawRect` generate the same gradient effect as `Box.background(gradient)`?

I'm trying to replicate the bottom fading effect at the top as well.
However, at the top, the white color persists across the whole gradient.
The code is in the :thread:

For the top part, i've used `drawWithCache` and `drawRect`:

```                val gradientBrush = Brush.verticalGradient(
                    0f to gradientStartColor,
                    1f to Color.Transparent,
                )
                onDrawWithContent {
                    drawContent()

                    drawRect(
                        brush = gradientBrush,
                        topLeft = Offset.Zero,
                        size = Size(width = size.width, height = 60.dp.toPx()),
                    )```

For the bottom part, i've used
```        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .background(
                    brush = Brush.verticalGradient(
                        0f to Color.Transparent,
                        1f to gradientStartColor,
                    )
                )
                .align(Alignment.BottomCenter)
                .zIndex(1f)
        )```

I have a feeling the the Brush for your rect at the top is drawing a gradient for a size that is larger than the rect.

you can test this by setting the `startY` and `endY` params in your `Brush.verticalGradient`

```            brush = Brush.verticalGradient(
              0f to gradientStartColor,
              1f to Color.Transparent,
              startY = 0f,
              endY = 60.dp.toPx()
            ),```

Do you know what that'd happen? Does the gradient take the whole size of the canvas into consideration?/

The brush will by default use all the available drawing space. For your box example you are setting the size of the box so the available drawing area is the same as the size of the rect.