How can i make a container with this kind of decoration using Flutter

Question

Please see image. I'm not so much concerned with the child of the container. Just the decoration. I'm trying to achieve the yellow background and the check icon that's at the top right corner. So far i've only being able to make the container and give it a border colour.

This is my code so far for the Container:

Container(
  height: 50,
  width: 90,
  decoration: BoxDecoration(
    border: Border.all(color:Colors.yelloAccent[100]),
    borderRadius: BorderRadius.all(Radius.circular(5),
    ),
    color: color,
  ),
  child: Center(child: Text(text, style: TextStyle(fontSize: 12, color: textColor, fontWeight: FontWeight.w900))),
);

Answer 1

You can easily create this with the help of Stack widget.

The top right triangular shape can be created by rotating a Container widget & adjusting its position. This can be achieved by Positioned & Transform widget.

Finally, the checkmark icon can be placed in another Positioned widget on top of the triangular shape.

Here, this snippet might help you:

return Stack(
      children: [
        // The actual container with border
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(4),
            border: Border.all(color: Colors.amber, width: 2),
          ),
          padding: const EdgeInsets.symmetric(horizontal:36, vertical: 24),
          child: Text(
            'Payment',
            style: const TextStyle(
              color: Colors.black87,
            ),
          ),
        ),
        
        // The top right triangular shape
        Positioned(
          top: -20,
          right: -80,
          child: Transform.rotate(
            angle: pi / 4,
            child: Container(
            color: Colors.amber,
            height: 50,
            width: 150,
          ),),
        ),
        
        // The Icon
        Positioned(
          top: -4,
          right: -8,
          child: Icon(Icons.done, color: Colors.white),
        ),
      ],
    );