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 WidgetFlutter Widget
VxCard()Card()

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

Vx extensionFlutter Widget
.card()Card()

Here are a few examples to help you get an idea of how to work with VelocityX Card 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();