Nurba Zhentaev
Nurba Zhentaev

Reputation: 11

Flutter custom paint

I'm trying to draw a path with buttons as in the screenshot. For some reason it shows differently on my other phone. I can't find the error. I used custom paint but I didn't succeed.

enter image description here

Is it possible to make a screen like the one in the picture?

Here what I did:

class LevelPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;
    final path = Path();
    /// First draw
    path
      ..moveTo(100, size.height - 120)
      ..lineTo(size.width / 1.6, size.height - 120)
      ..arcTo(
          Rect.fromCircle(center: Offset(250, size.height - 210), radius: 90),
          -3.14 / 2,
          3.14,
          true);
    /// Second draw
    path
      ..moveTo(140, size.height / 1.62) //140/382
      ..lineTo(size.width / 1.6, size.height - 300)
      ..arcTo(
          Rect.fromCircle(center: Offset(150, size.height - 390), radius: 90),
          3.14 / 2,
          3.14,
          true);
     // /// Third draw
    path
      ..moveTo(140, size.height / 2.57)
      ..lineTo(size.width / 1.6, size.height / 2.57)
      ..arcTo(
          Rect.fromCircle(center: Offset(250, size.height / 3.65), radius: 90),
          -3.14 / 2,
          3.14,
          true);
    path
      ..moveTo(140, size.height / 6.25) //140/382
      ..lineTo(size.width / 1.6, size.height / 6.25)
      ..arcTo(
          Rect.fromCircle(center: Offset(150, size.height / 22), radius: 90),
          3.14 / 2,
          3.14 / 2,
          true);

    canvas.drawPath(path, paint);
  }

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

Upvotes: 1

Views: 73

Answers (0)

Related Questions