CODEWITHSUNDEEP
flutter
Siamak S
Siamak S

Reputation: 163

Paint custom shape with lines and arcs inside Flutter

I want to draw a custom shape with straight lines and arcs, I used the below code but the output is strange!

var ovalW = size.width / 4;
var ovalH = size.height / 4;

var path = Path();
path.moveTo(0, ovalH / 2);
path.arcTo(Rect.fromLTWH(0, 0, ovalW, ovalH), pi / 2, pi / 2, true);
path.lineTo(size.width - (ovalW / 2), ovalH);
path.arcTo(Rect.fromLTWH(size.width - ovalW, 0, ovalW, ovalH), 0, pi / 2, true);
path.lineTo(size.width, 0);
path.lineTo(0, 0);
path.close();

flutter custom shape with lines and arcs

Edited

I'm trying to get something like this:

enter image description here

Upvotes: 0

Views: 202

Answers (1)

Siamak S
Siamak S

Reputation: 163

As @pskink said on above comments, Path.addRRect do that.

For someone who later see this post, here is the final code:

path.addRRect(RRect.fromLTRBAndCorners(0, 0, size.width, size.height / 4, bottomRight: Radius.elliptical(size.width / 8, size.height / 8), bottomLeft: Radius.elliptical(size.width / 8, size.height / 8)));

Upvotes: 1

Related Questions