Rounded corner Card Widget with right border in flutter
DartFlutterDart Problem Overview
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?
Dart Solutions
Solution 1 - Dart
Use the shape parameter in the Card widget, example:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container() )
Solution 2 - Dart
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.
Solution 3 - Dart
This solution worked for me. If we remove the shape property from the card, it leaves behind rectangular white corners. No limitation of elevation whatsoever.
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
shadowColor: Colors.blueAccent,
elevation: 15,
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15))),
child: Container(
height: 180,
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: Colors.red, width: 15)),
color: Colors.yellowAccent.shade100,
),
padding: EdgeInsets.all(20.0),
alignment: Alignment.centerLeft,
child: Container()),
),
)
Solution 4 - Dart
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
Solution 5 - Dart
You can achieve it this way, use shape property and assign RoundedRectangleBorder class inside a Card and add side property in RoundedRectangleBorder
BorderSide, which is used to describe each side of the box.
Container(
padding: const EdgeInsets.only(right: 8.0, left: 8.0),
height: 60,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
side: BorderSide(color: appThemeColor.shade200, width: 0.5),
borderRadius: BorderRadius.circular(5)),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15)),
color: Colors.deepPurple,
),
width: 5,
),
],
),
),
)
Solution 6 - Dart
For me, all the solutions using clipping cut off some of the shadow. Anyway, I found an easier solution imo:
Wrap the card's child around a Container widget. Specify the rounded rectangle border for the card, then the colored border side for the container.
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
child: Container(
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.red, width: 8)
),
child: // your card content
)
)
Solution 7 - Dart
I just add IntrinsicHeight and CrossAxisAlignment.stretch on paresh's answer so right border's height is scretched.
Container(
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.green, width: 0.5),
borderRadius: BorderRadius.circular(5)),
//Wrap with IntrinsicHeight
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
//Add CrossAxisAlignment.stretch
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text("Text 1"),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text("Text 2"),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text("Text 3"),
),
],
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15)),
color: Colors.green,
),
width: 5,
),
],
),
),
))
Solution 8 - Dart
Instead of using a Card you could also use a Container to achieve this, you can use the gradient property on BoxDecoration. The stops property is going to determine the width of your border. Then you can add your colors and have a nice border.
For the rounded edges you can just use the borderRadius property.
Container(
margin: EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 8.0,
),
padding: EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 12.0,
),
child: Text('A "card" with rounded edges and a border'),
decoration: BoxDecoration(
gradient: LinearGradient(
stops: [0.015, 0.015],
colors: [
Colors.blue,
Colors.white,
],
),
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
offset: Offset(0.0, 1.5),
),
],
),
)
Solution 9 - Dart
You can use the clipBehavior in the Card and move the BorderSide to a Container.
Card(
clipBehavior: Clip.antiAlias,
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.green, width: 5))),
),
)