Create rounded angles with clip path

Question

Through the clipPath I was able to create a widget with a design similar to that of the photo I posted below. The only problem is to get the rounded corners as shown by the arrows in the photo.

Below it's my code:

class HomePage extends StatelessWidget {
  const HomePage();

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Container(
        color: appAccentColor,
        width: double.infinity,
        child: Text("data"),
      ),
      clipper: ConvexClipPath(),
    );
  }
}

class ConvexClipPath extends CustomClipper<Path> {
  double factor = 55;
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height - size.height * (factor / 100));
    path.quadraticBezierTo(size.width / 2, size.height - size.height * ((factor - 10) / 100), size.width, size.height - size.height * (factor / 100));
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Answer 1

I think you have to use path.quadraticBezierTo(x1, y1, x2, y2); again to add rounded corners. There is no easier solution to add a radius to a corner. You can see an example in this answer Or maybe consider drawing a svg with a dedicated tool and using it with parseSvgPathData(data) of the Path library.