Search code examples
flutterwidgetborder

Flutter : single border with border radius on Card


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 - expected output


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-> image