Flutter : single border with border radius on Card

May 27, 2022

Issue : trouble setting border-radius along with single border (right border) on the Card widget.

so far i’ve got :

//for single border
return Card(
  shape: const Border(
    right: BorderSide(color: Color.fromARGB(179, 232, 5, 5), width: 3),
  ),
  child:...,
);

//for border-radius
return Card(
  shape: const RoundedRectangleBorder(
   side: BorderSide(color: Colors.red, width: 3),
   borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  child:...,
);

I need a combination of both, to have a card with :

Border radius on all sides
Border only on the right side

like this –

>Solution :

Try below code

Card(
      elevation: 2,
      child: ClipPath(
        child: Container(
          height: 100,
          decoration: BoxDecoration(
            border: Border(
              right: BorderSide(
                color: Color.fromARGB(179, 232, 5, 5),
                width: 5,
              ),
            ),
          ),
        ),
        clipper: ShapeBorderClipper(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(3),
          ),
        ),
      ),
    ),

Result->