flutterflutter-custompaintercustom-painter

How to draw a trapezoid shape line in flutter using Rrect or similar?


I want to draw a trapezoidal shape in flutter, like this:

enter image description here

Now I am drawing an elliptical shape using Rrect for the same,

enter image description here

here is my code for drawing the second picture(getting an elliptical shape)

 @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset circleOffset =
        offset + Offset(cfg.size!.width / 2, cfg.size!.height + 8);
    canvas.drawRRect(
        RRect.fromRectAndRadius(
          Rect.fromCenter(center: circleOffset, width: 50, height: 5),
          Radius.circular(radius),
        ),
        _paint);
  }

Solution

  • using Rrect.fromRectAndCorners,

      {
        Radius topLeft = Radius.circular(10),
        ///top left corner curve or radius, in my case it is 10
        Radius topRight = Radius.circular(10),
        ///top right corner curve or radius, in my case it is 10
        Radius bottomRight = Radius.zero,
        ///bottom left corner curve or radius, in my case it is zero
        Radius bottomLeft = Radius.zero
        ///bottom right corner curve or radius, in my case it is zero
      }
    

    so my final code looks like

    @override
      void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
        final Offset circleOffset =
            offset + Offset(cfg.size!.width / 2, cfg.size!.height + 8);
        canvas.drawRRect(
          RRect.fromRectAndCorners(
            Rect.fromCenter(center: circleOffset, width: 50, height: 5),
            bottomLeft: Radius.zero,
            bottomRight: Radius.zero,
            topLeft: Radius.circular(radius),
            topRight: Radius.circular(radius),
          ),
          _paint,
        );
      }
    

    will get more details in the documentation here

    https://api.flutter.dev/flutter/dart-ui/RRect/RRect.fromRectAndCorners.html

    Thanks for help.