CODEWITHSUNDEEP
flutter
Dirk
Dirk

Reputation: 3221

Flutter - how do I rotate an object on a CustomPainter canvas?

How do you rotate an object drawn on a canvas in Flutter (not the whole canvas, just the object)?

The following does not work. Error is: This expression has a type of 'void' so its value can't be used.

    Transform.rotate(
        angle: pi,
        child: canvas.drawPath(
            getTrianglePath(Offset(secondhandX, secondhandY)),
            secondhandBrush));

Here is the full code:

// imports omitted

class TimerDialPainter extends CustomPainter {

  Path getTrianglePath(Offset position) {
    return Path()
      ..moveTo(position.dx - 20, position.dy - 20)
      ..lineTo(position.dx + 40, position.dy + 40)
      ..lineTo(position.dx - 20, position.dy + 40)
      ..lineTo(position.dx - 20, position.dy - 20);
  }

  @override
  void paint(Canvas canvas, Size size) {
    int centerX = size.width / 2;
    int centerY = size.height / 2;
    int secondsArc = 60;

    Paint countBrush = Paint()
      ..color = (Colors.red) 
      ..style = PaintingStyle.fill
      ..strokeWidth = 3;

    var secondhandX = centerX + 80 * cos(secondsArc * pi / 180);
    var secondhandY = centerY + 80 * sin(secondsArc * pi / 180);

    Transform.rotate(
        angle: pi/3,
        child: canvas.drawPath(
            getTrianglePath(Offset(secondhandX, secondhandY)),
            countBrush));

    } //I feel this is not a right place to solve this?? 
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Upvotes: 0

Views: 1315

Answers (1)

Kaushik Chandru
Kaushik Chandru

Reputation: 17792

Try rotating the canvas and paint it. Then rotate it back to previous value

 @override
  void paint(Canvas canvas, Size size) {
    double centerX = size.width / 2;
    double centerY = size.height / 2;
    int secondsArc = 60;

    Paint countBrush = Paint()
      ..color = (Colors.red)
      ..style = PaintingStyle.fill
      ..strokeWidth = 3;

    num secondhandX = centerX + 80 * cos(secondsArc * pi / 180);
    num secondhandY = centerY + 80 * sin(secondsArc * pi / 180);
    canvas.rotate(40);
    canvas.drawPath(
        getTrianglePath(Offset(secondhandX.toDouble(), secondhandY.toDouble())),
        countBrush);
    canvas.rotate(0);
  }

Upvotes: 1

Related Questions