Issue
I am trying to make a custom curved app bar, look like the example below
and after many tries here is my shot
source code :
class CustomShapeBorder extends ContinuousRectangleBorder {
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
final double innerCircleRadius = 150.0;
Path path = Path();
path.lineTo(0, rect.height);
path.cubicTo(rect.width / 1.5 - 40, rect.height + innerCircleRadius - 40, rect.width / 1.5 + 40,
rect.height + innerCircleRadius - 40, rect.width / 1.5 + 75, rect.height + 50);
path.quadraticBezierTo(
rect.width / 1.5 + (innerCircleRadius / 2) + 30, rect.height + 35, rect.width, rect.height);
path.lineTo(rect.width, 0.0);
path.close();
return path;
}
}
is there an easy way to make it for example SVG.
Solution
I could come up with this result:
Here is the Path
:
double x = 150, y = 45, r = 0.5;
Path path = Path()
..addRRect(RRect.fromRectAndCorners(rect))
..moveTo(rect.bottomRight.dx - 30, rect.bottomCenter.dy)
..relativeQuadraticBezierTo(((-x / 2)+(x/6)) * (1 - r), 0, -x / 2 * r, y * r)
..relativeQuadraticBezierTo(-x / 6 * r, y * (1 - r), -x / 2 * (1 - r), y * (1 - r))
..relativeQuadraticBezierTo(((-x / 2)+(x/6)) * (1 - r), 0, -x / 2 * (1 - r), -y * (1 - r))
..relativeQuadraticBezierTo(-x/6*r , -y * r, -x / 2 * r, -y * r);
And here is a good article to see the basics to make shapes: Paths in Flutter: A Visual Guide
Answered By – Pablo Barrera
Answer Checked By – Willingham (FlutterFixes Volunteer)