How to invert a rectangle ina Canvas Flutter?

Issue

I am making a background using CustomPainter in Flutter. Below is the result I want vs what I got from my code. What should I do to invert the Rectangle as shown in the expected output?

  @override
  void paint(Canvas canvas, Size size) {
   
    final paint = Paint()
      ..shader = RadialGradient(
        colors: [
          CustomColors.crispBackgroundGradientColor1,
          CustomColors.crispBackgroundPrimaryColor,
        ],
      ).createShader(Rect.fromCircle(
        center: const Offset(0,0),
        radius: size.width,
      ));
     canvas.drawRect(Rect.fromPoints(const Offset(0,0), Offset(size.height / 2 , size.height / 2)), paint);

  }

Just the background

what u got

Solution

try this

    final radius = min(size.height, size.width)/2;
    final gradient = RadialGradient(
      colors: [
        CustomColors.crispBackgroundGradientColor1,
        CustomColors.crispBackgroundPrimaryColor,
      ],
    );
    final paint = Paint()
      ..shader = gradient.createShader(Rect.fromCircle(
        center: Offset.zero,
        radius: radius,
      ));
    canvas.drawRect(
        Rect.fromLTRB(
          0,
          0,
          size.width,
          size.height / 2,
        ),
        paint);

    paint.shader = gradient.createShader(Rect.fromCircle(
      center: Offset(size.width, size.height),
      radius: radius,
    ));

    canvas.drawRect(
        Rect.fromLTRB(
          0,
          size.height / 2 - 1,
          size.width,
          size.height,
        ),
        paint);

Answered By – Hooman

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.