Box

VelocityX allows you to quicky create a Container using .box() extension or VxBox() widget.

important
  • You can either use this or Container widget.

  • If you are done with the box properties do make sure to use .make() to get a container

VxBox() is a VelocityX widget which allows you to create a container

Vx WidgetFlutter Widget
VxBox()Container()

.box() is a VelocityX extension which allows you to create a container

Vx extensionFlutter Widget
.box()Container()

VxBox Sample using widget

Widget build(BuildContext context) {
return VxBox(child: Text("VelocityX")).red500.make().centered();
}

Above code creates a container of red color with a child as VelocityX Text which is centered

VxBox Sample using extension

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

Above code creates a container of red color with a child as VelocityX Text which is centered

VxBox Constructor

VxBox({this.child})

VxBox Properties

  • Widget child : The child contained by the VxBox.

Useful Methods

tip
  • Use this methods before .make()

VxBox Height and Width

  • Use height() and width() methods to apply height and width on VxBox
Widget build(BuildContext context) {
return VxBox(child: Text("Hello").centered())
.height(100)
.width(100)
.red500
.make()
.centered();
}

Above code creates a container of red color along with height & width of 100px with a child as VelocityX Text which is centered.

VxBox Padding and Margin

Use padding() and margin() methods to apply padding and margin on VxBox.

note
  • You can use VelocityX class to provide predefined EdgeInsets value.

Using VelocityX class to get predefined EdgeInsets value

  • Vx.m12 - Set insets of 12 from all the side.

  • Vx.mH12 - Set insets of 12 in Horizontal way.

  • Vx.mV12 - Set insets of 12 in Vertical way.

Widget build(BuildContext context) {
return VxBox(child: Text("VelocityX").centered())
.padding(Vx.m12)
.red500
.make()
}

Above code sets a padding of 12 insets on VxBox.

Widget build(BuildContext context) {
return VxBox(child: Text("VelocityX").centered())
.margin(Vx.m12)
.red500
.make()
}

Above code sets a margin of 12 insets on VxBox.

VxBox Color

  • There are different ways to give colors to the VelocityX Box using getter and methods.

    • You can use VelocityX color palette using VelocityX getter as color name like .red600. For e.g.

      return Widget build(BuildContext context) {
      return VxBox(child: Text("VelocityX").centered())
      .red500
      .make()
      .centered();
      };
    • You can use Flutter colors using VelocityX method like .color(Colors.red). For e.g.

      return VxBox(child: Text("VelocityX").centered()).color(Colors.red).make();
    • You can use hex color code with VelocityX method like .hexColor("#cfcfcf"). For e.g.

      return VxBox(child: Text("VelocityX").centered()).hexColor("#cfcfcf").make();

VxBox Alignment

There are multiple getters to align the VxBox

  • You can align your VxBox to bottom center like this

    return VxBox(child: Text("VelocityX").centered()).alignBottomCenter
    .red500
    .make()
    .centered();
VxFlutter
alignTopCenterAlignment.topCenter
alignTopLeftAlignment.topLeft
alignTopRightAlignment.topRight
alignCenterAlignment.center
alignCenterLeftAlignment.centerLeft
alignCenterRightAlignment.centerRight
alignBottomCenterAlignment.bottomCenter
alignBottomLeftAlignment.bottomLeft
alignBottomRightAlignment.bottomRight
  • You can use alignment method to set custom alignment

    return VxBox(child: Text("VelocityX").centered()).alignment(Alignment(20,10))
    .red500
    .make()
    .centered();

VxBox Shadow

VelocityX offers predefined shadows to be used on VxBox

  • shadow

  • shadowXs

  • shadowSm

  • shadowMd

  • shadowLg

  • shadowXl

  • shadow2xl

    return VxBox(child: Text("VelocityX").centered())
    .red500
    .shadow
    .height(100)
    .make()
    .centered();