MyGist

id	title
card	Card

VelocityX allows you to quicky create a card using .card() extension or VxCard() widget. You can eaily modify the properties like Shadow Color, Elevation, and Clip of VelocityX Card using different extensions

:::important

You can either use this or Card() widget.
If you are done with the Card properties do make sure to use .make() to get a container

:::. VxCard() is a VelocityX widget which allows you to create a Card

Vx Widget	Flutter Widget
VxCard()	Card()

.card() is a VelocityX extension which allows you to create a Card

Vx extension	Flutter Widget
.card()	Card()

Here are a few examples to help you get an idea of how to work with VelocityX Card widget.

Above is an image showcasing a simple usage of the VxCard Widget

VxCard Sample using widget

  Widget build(BuildContext context) {
    return VxCard("VelocityX".text.make()).red600.make().centered();
  }

Above code creates a card of red background with a text VelocityX

VxCard Sample using extension

  Widget build(BuildContext context) {
    return "VelocityX".text.make().card.red600.make().centered();
  }

VxCard Constructor

 VxCard(
    this._child,
  )

VxCard Properties

Widget _child : The child contained by the VxCard.

Useful Methods

:::tip

Use this methods before .make()

:::

VxCard Color

There are different ways to give colors to the VelocityX Card.
- You can use VelocityX color palette using VelocityX extension as color name like .red600. For e.g.
```
 return "VelocityX".text.make().card.red600.make();
```
- You can use Flutter colors using VelocityX extension like .color(Colors.red). For e.g.
```
return "VelocityX".text.make().card.color(Colors.red).make();
```
- You can use hex color code with VelocityX extension like .hexColor("#cfcfcf"). For e.g.
```
return "VelocityX".text.make().card.hexColor("#cfcfcf").make();
```

VxCard Elevation

You can provied custom elevation using VelocityX extension like .elevation(20).

    return "VelocityX".text.make().card.elevation(20).hexColor("#cfcfcf").make();

Remove elevation using VelocityX extension like .zero.

    return "VelocityX".text.make().card.zero.hexColor("#cfcfcf").make();

VxCard Circular

Maker your card complete circle using VelocityX extension like .circular

    return "VelocityX".text.make().card.circular.make().centered();

Remove defulat Border Radius and Elevation from VxCard using VelocityX extension like .zeroCircular

    return "VelocityX".text.make().card.zeroCircular.make().centered();

VxCard Shadow Color

You can easily customize the card shadow color using VelocityX extension like .shadowColor(Colors.red)

   return "VelocityX".text.make().card.shadowColor(Colors.red).make().centered();

iampawan/card.md