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?

Answer 1

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,
  ),
),

Answer 2

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),
            ),
        ),
        ],
    ),
  ),
),

Answer 3

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),
        ),
      ),
    ),
    // ...

Answer 4

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.

Answer 5

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),
       ),
     ),
   ),
// ............
// ............

Answer 6

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,
  ),
)