Card is a another important widget of the material design and has rounded corners and shadows. By using card we can enhance the look and feel of the user interface.similer to other widets .
we can customize card widgets by using properties like shape and margin etc.
The elevation property of a card is used to make card shadow.To customize the shape of the card You need to modify the shape property .some of the shape properties are
1.StadiumBorder
2.OutlineInputBorder
3.UnderlineInputBorder
4.BeveledRectangleBorder
5.RoundedRectangleBorder etc
Follow below sample example for Card widgets
Card(
elevation: 5.0,//For shadow
color: Colors.white,
margin: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Default shape',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 50.0,
color: Colors.red,
),
)
],
),
)
The following are a few ways to customize the Card’s shape property
//RoundedRectangleBorder
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(10),
)
//BeveledRectangleBorder
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
)
// UnderlineInputBorder
shape: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.deepOrange.withOpacity(0.5)))
// Create a Stadium Border
shape: StadiumBorder()
Demo
