Rounded corner Card Widget with right border in flutter

Question

I have to create a Card like this:

I had written below code to achieve the desired UI, but it didn't work as expected.

Card(   elevation: 5,   shape: RoundedRectangleBorder(     borderRadius: BorderRadius.only(       bottomRight: Radius.circular(10),       topRight: Radius.circular(10)),     side: BorderSide(width: 5, color: Colors.green)),   child: ListTile(), ) 

The code above produced this:

Whereas using the code below:

Card(   elevation: 5,   shape: Border(right: BorderSide(color: Colors.red, width: 5)),   child: ListTile(), ) 

generated this output:

How can I create the required UI in flutter?

Answer 1

Use the shape parameter in the Card widget, example:

Card(       shape: RoundedRectangleBorder(         borderRadius: BorderRadius.circular(15.0),       ),       child: Container() ) 

Answer 2

I have used ClipPath to achieve the UI asked in the question, check out the below code.

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

This gives the below output,

If there is a better way to achieve said result kindly do answer.