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