How can i create custom shape widget in flutter? which is dynamically render in all mobile devices - flutter

Question

I want to add a custom profile avatar to one of my projects. I tried with the custom painter & clipper. But, when I test in different devices the shape & size are not as my designer gave to me.
This is my painter class.
import 'package:flutter/material.dart';
class ProfileBox extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final paint = Paint();
paint.color = Colors.grey;
paint.style = PaintingStyle.fill;
final path = Path();
path.moveTo(25, 4);
path.quadraticBezierTo(size.width / 2, -4, size.width - 25, 4);
path.quadraticBezierTo(size.width - 10, 10, size.width - 4, 25);
path.quadraticBezierTo(
size.width + 4, size.height / 2, size.width - 4, size.height - 25);
path.quadraticBezierTo(
size.width - 10, size.width - 10, size.width - 25, size.height - 4);
path.quadraticBezierTo(
size.width / 2, size.height + 4, 25, size.height - 4);
path.quadraticBezierTo(10, size.height - 10, 4, size.height - 25);
path.quadraticBezierTo(-4, size.height / 2, 4, 25);
path.quadraticBezierTo(10, 10, 25, 4);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return this != oldDelegate;
}
}
This is my clipper class.
import 'package:invoice_app/constants/globals.dart';
class ProfileClipper extends CustomClipper<Path> {
ProfileClipper({#required this.profileSize});
final ProfileSize profileSize;
#override
Path getClip(Size size) {
final path = Path();
path.moveTo(23, 2);
path.quadraticBezierTo(size.width / 2, -4, size.width - 23, 2);
path.quadraticBezierTo(size.width - 8, 8, size.width - 2, 23);
path.quadraticBezierTo(
size.width + 4, size.height / 2, size.width - 2, size.height - 23);
path.quadraticBezierTo(
size.width - 8, size.width - 8, size.width - 23, size.height - 2);
path.quadraticBezierTo(
size.width / 2, size.height + 4, 23, size.height - 2);
path.quadraticBezierTo(8, size.height - 8, 2, size.height - 23);
path.quadraticBezierTo(-4, size.height / 2, 2, 23);
path.quadraticBezierTo(8, 8, 23, 2);
return path;
}
#override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
And, I'm using it in UI with the below widget.
painter: ProfileBox(),
child: Container(
padding: const EdgeInsets.all(5),
height: 100,
width: 100,
child: ClipPath(
clipper: ProfileClipper(profileSize: ProfileSize.smallProfile),
child: Container(
// if image url is null and want to display icon or svg then add padding
padding: _imageFile != null
? const EdgeInsets.all(0)
: const EdgeInsets.all(13),
// color: Colors.blue,
child: Image(
// if image url is null then display icon or svg
image: _imageFile != null
? FileImage(_imageFile)
: AssetImage(
'assets/defaultbusiness.png',
),
fit: BoxFit.fill,
),
),
),
),
),