jonasxd360
jonasxd360

Reputation: 1265

How to create outlined Card widget in Flutter

I want to include a outlined material card with flutter, but since the card widget doesn't have a style element or something similar, I am not sure how to implement this.

I tried using the shape: property but wasn't very successful, mostly because I didn't understand how it works.

enter image description here

Upvotes: 6

Views: 10087

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267384

Output:

enter image description here

It has shape property which takes a Border you can change that.

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(40), // if you need this
    side: BorderSide(
      color: Colors.grey.withOpacity(0.2),
      width: 1,
    ),
  ),
  child: Container(
    color: Colors.white,
    width: 200,
    height: 200,
  ),
)

I think the screenshot you showed can also be achieved by just using elevation property of the Card.

Upvotes: 14

Related Questions