How to design the container as shown in the image. Here is my partially achieved code

 Widget buildCard(index, selectedIndex) => Container(
        width: 150,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            border: Border.all(
                color: (selectedIndex == index)
                    ? Color.fromARGB(255, 199, 16, 16)
                    : Color(0xFFEEEEEE))),
        child: Column(
          children: [
            Positioned(
              top: -10,
              right: 0,
              child: Container(
                alignment: Alignment.topRight,
                child: Transform.rotate(
                  angle: pi / 4,
                  child: Container(
                    color: Colors.amber,
                    height: 20,
                    width: 30,
                  ),
                ),
              ),
            ),

            // The Icon
            // Positioned(
            //   top: 4,
            //   right: -18,
            //   child: Icon(Icons.done, color: Color.fromARGB(255, 212, 23, 23)),
            // ),
          ],
        ),
      ); }

CodePudding user response：

Using Stack and Clippath

Stack(
  alignment: Alignment.topRight,
  children: <Widget>[
    Container(
      width: double.infinity,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.redAccent,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.blueAccent, width: 5)
      ),
    ),
    ClipPath(
      clipper: CustomClipPathTopContainer(),
      child: Container(
        height: 60,
        width: 60,
        decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.only(topRight: Radius.circular(20)),
          border: Border.all(color: Colors.blueAccent, width: 5)
        ),
      ),
    ),
    Positioned(
      top: 5,
      right: 8,
      child: Icon(Icons.done, color: Colors.white,),
    )
  ],
),


class CustomClipPathTopContainer extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    Path path0 = Path();
    path0.moveTo(0,0);
    path0.lineTo(size.width,0);
    path0.lineTo(size.width,size.height);
    path0.lineTo(0,0);
    return path0;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}