How to make Rounded Rectangle in 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'),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),