Create custom shape in flutter

Question

I'm working on a Flutter project and I need to create a custom shape that looks like the one shown below:

I've attempted to use fluttershapemaker, but I couldn't quite achieve the exact shape I need.

I've heard about the CustomPainter widget in Flutter, but I'm not familiar with it. Can someone provide guidance on how to create this specific shape using CustomPainter or suggest alternative approaches to achieve it?

Any help or suggestions would be greatly appreciated. Thank you in advance!

Answer 1

You can draw that with a CustomPainter:

class CustomShapePainter extends CustomPainter {
  const CustomShapePainter({
    required this.topRadius,
    required this.bottomRadius,
    required this.color,
  });

  final double topRadius;
  final double bottomRadius;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    final path = Path()
      // Top side
      ..lineTo(size.width - topRadius, 0)
      // Top-right corner
      ..arcToPoint(
        Offset(size.width, topRadius),
        radius: Radius.circular(topRadius),
      )
      // Right side
      ..lineTo(size.width, size.height - bottomRadius)
      // Bottom-right corner
      ..arcToPoint(
        Offset(size.width - bottomRadius, size.height),
        radius: Radius.circular(bottomRadius),
      )
      // Bottom side
      ..lineTo(bottomRadius + topRadius, size.height)
      // Bottom-left corner
      ..arcToPoint(
        Offset(topRadius, size.height - bottomRadius),
        radius: Radius.circular(bottomRadius),
      )
      // Left side
      ..lineTo(topRadius, topRadius)
      // Top-right inverted corner
      ..arcToPoint(
        Offset.zero,
        radius: Radius.circular(topRadius),
        clockwise: false,
      );

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomShapePainter oldDelegate) {
    return oldDelegate.topRadius != topRadius ||
        oldDelegate.bottomRadius != bottomRadius ||
        oldDelegate.color != color;
  }
}

Working example on DartPad.

Answer 2

You can achieve this by simply using a Container and set the border radius from decoration. Kindly adjust the values for the Radius based on your requirements.

            Container(
              height: 50,
              width: 200,
              alignment: Alignment.center,
              decoration: const BoxDecoration(
                color: Colors.black87,
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(10),
                  bottom: Radius.circular(25),
                )
              ),
              child: const Text(
                'FEATURED',
                style: TextStyle(
                  color: Colors.greenAccent,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),