Question 276929 in Flutter Question posted in
The official Flutter documentation can be found here.

Create custom shape in flutter

I’m working on a Flutter project and I need to create a custom shape that looks like the one shown below:
enter image description here

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!

Tags:

2

Answers


  1. 0

    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,
                ),
              ),
            ),

    enter image description here

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search