Custom Card Shape Flutter SDK

Question

I have developed an app with GridView on Flutter. GridView items are Card and the default card shape is Rectangle with a radius of 4.

I know there is shape property for Card Widget and it takes ShapeBorder class but I am unable to find how to use ShapeBorder class and customize my cards in GridView.

How do I go about this?

score 315 · Answer 1 · edited Nov 26 '21 at 20:23

315

You can use it this way

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: Text(
    'Card with circular border',
    textScaleFactor: 1.2,
  ),
),
Card(
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Text(
    'Card with Beveled border',
    textScaleFactor: 1.2,
  ),
),
Card(
  shape: StadiumBorder(
  side: BorderSide(
    color: Colors.black,
    width: 2.0,
  ),
),
  child: Text(
    'Card with Stadium border',
    textScaleFactor: 1.2,
  ),
),

edited Nov 26 '21 at 20:23

KayBee

175
2
8

answered Jun 08 '18 at 09:19

Shady Aziza

50,824
20
115
113

9

Using the RoundedRectangleBorder I also able to get a rounded shape to the Card. But an Image inside it - does not cropped by the Card's rounded image shape. How we can do that? Thanks! – Santanu Karar Jan 24 '19 at 10:09
9

@SantanuKarar You wrap the image in ClipRRect() - https://docs.flutter.io/flutter/widgets/ClipRRect-class.html – Luke Stanyer Mar 12 '19 at 09:56
@aziza how to change border color? – user9139407 Jul 17 '19 at 09:15
This answer was super useful to understand how to add borders and colors to chip as well! – Amogh Mishra Jan 07 '21 at 19:57
after using Roundedrectangle border with circular it only round bottom card side not upper card side – Adnan haider Jun 15 '21 at 05:08

score 87 · Answer 2 · answered Dec 04 '19 at 17:09

87

When Card I always use RoundedRectangleBorder.

Card(
  color: Colors.grey[900],
  shape: RoundedRectangleBorder(
    side: BorderSide(color: Colors.white70, width: 1),
    borderRadius: BorderRadius.circular(10),
  ),
  margin: EdgeInsets.all(20.0),
  child: Container(
    child: Column(
        children: <Widget>[
        ListTile(
            title: Text(
            'example',
            style: TextStyle(fontSize: 18, color: Colors.white),
            ),
        ),
        ],
    ),
  ),
),

answered Dec 04 '19 at 17:09

Lucas De Lavra Pinto

1,148
9
8

Remember to add `elevation: 0` to the `Card` widget to remove the default shadow. – Erisan Olasheni Feb 28 '21 at 04:57
1

**how can i apply** only a single border to the card , like **only right border** – shaderone May 27 '22 at 09:57

score 32 · Answer 3 · answered Nov 13 '19 at 21:28

32

You can also customize the card theme globally with ThemeData.cardTheme:

MaterialApp(
  title: 'savvy',
  theme: ThemeData(
    cardTheme: CardTheme(
      shape: RoundedRectangleBorder(
        borderRadius: const BorderRadius.all(
          Radius.circular(8.0),
        ),
      ),
    ),
    // ...

answered Nov 13 '19 at 21:28

micimize

904
9
16

yes this is modular approach. if you have same style card throughout the app. – Developine Nov 14 '19 at 06:57
that should be the recommended way! – Cyril Apr 13 '21 at 23:58

score 18 · Answer 4 · answered Nov 14 '20 at 22:29

An Alternative Solution to the above

Card(
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))),
  color: Colors.white,
  child: ...
)

You can use BorderRadius.only() to customize the corners you wish to manage.

score 12 · Answer 5 · answered Apr 30 '21 at 10:03

A Better way to customise Card Radius ( Also other options ) is to set theme for Card globally. So that you can use same style for Card througout the entire app. You can use this method for many other widget also.

For Card Theme you can use ThemeData.cardTheme

MaterialApp(
 title: 'MySampleApp',
 theme: ThemeData(
   cardTheme: CardTheme(
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.all(
         Radius.circular(16.0),
       ),
     ),
   ),
// ............
// ............

U can also use the short-hand `BorderRadius.circular(8)` instead of `BorderRadius.all(Radius.circular(5.0))`. — Son Nguyen, Aug 25 '21 at 13:50

score 0 · Answer 6 · answered Aug 20 '23 at 11:37

0

You can shape like this in card custom circle with icons

Card(
  elevation: 20,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(100),
  ),
  child: const Icon(
    Icons.list,
    size: 92,
  ),
)

answered Aug 20 '23 at 11:37

Bhargav Raviya

84
6

Custom Card Shape Flutter SDK

6 Answers6

Linked