How to make Rounded Rectangle in Flutter - flutter

Question

I am trying to make a triangle from a custom painter have a rounded corner.
Image on the left is what I have so far and Image on the right is what I am tring to do.
Here's is my code.
class Triangle extends StatelessWidget {
const Triangle({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return CustomPaint(
painter: MyPainter(),
child: Container(
height: MySize.yMargin(10),
width: MySize.xMargin(20),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(30)),
child: Center(
child: Padding(
padding: const EdgeInsets.only(left: 30.0, bottom: 16),
child: Transform.rotate(
angle: math.pi / 4,
child: Text('New',
style: TextStyle(
color: Colors.white,
fontSize: MySize.textSize(5),
fontWeight: FontWeight.bold,
)))))));
}
}
class MyPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final paint = Paint();
paint.color = Colors.yellow;
var path = Path();
path.lineTo(size.width, 0);
path.lineTo(size.height, size.width);
path.close();
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Answer 1

You can try to check out this package

Answer 2

try this:
import 'package:vector_math/vector_math.dart' as vector;
child: Container(
color: Colors.yellow,
width: 300,
height: 100,
child: Stack(
children: [
Positioned(
top: -20,
right: -20,
child: Transform.rotate(
angle: vector.radians(45),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
alignment: Alignment.bottomCenter,
height: 50,
width: 50,
color: Color(0xff2DD485),
child: Text('NEW'),
),
),
),
),
],
),
),