Custom Card Shape Flutter SDK
FlutterFlutter LayoutFlutter Problem Overview
I just started learning Flutter and I have developed an app with GridView. GridView items are Card. 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.
Thanks in Advance.
Flutter Solutions
Solution 1 - Flutter
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,
),
),
Solution 2 - Flutter
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),
),
),
],
),
),
),
Solution 3 - Flutter
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),
),
),
),
// ...
Solution 4 - Flutter
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.
Solution 5 - Flutter
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),
),
),
),
// ............
// ............