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.
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.
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.
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, ), ),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With