Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom Card Shape Flutter SDK

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.

like image 888
Developine Avatar asked Jun 08 '18 08:06

Developine


People also ask

How do you change the shape of your card in flutter?

A circle card actually is a specific rounded card. You can set the shape property to RoundedRectangleBorder() or CircleBorder() in order to create a circle Card. If you use RoundedRectangleBorder, the key point here is to increase the border radius to a large number, at least half the width of the Card's child.

How do you change the card size in flutter?

To modify the width or height of a card you can wrap it in a Container Widget and provide height and/or width properties to it. J. S. J. S. If the Container is nested in another widget, the width & height may not get applied as expected.


Video Answer


1 Answers

You can use it this way

enter image description here

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,   ), ), 
like image 175
Shady Aziza Avatar answered Sep 22 '22 06:09

Shady Aziza