Skip to main content

​
Border

StacBorder allows you to define the Flutter Border class using JSON with support for both uniform borders (all sides) and individual border sides. To know more about the Border class in Flutter, refer to the official documentation.

​
Features

  • Uniform Border: Apply the same border to all sides (backward compatible)
  • Individual Border Sides: Specify different borders for top, right, bottom, and left sides
  • Automatic Detection: The system automatically detects whether to use uniform or individual borders

​
Properties

​
Uniform Border (All Sides)

PropertyTypeDescription
colorString?Defines color of the border for all sides.
widthStacDouble?Defines thickness of the border for all sides (logical px).
borderStyleBorderStyle?Defines the style of the border for all sides. Can be solid or none. Defaults to solid.
strokeAlignStacDouble?Defines the relative position of the stroke on values range from -1.0 (inside) to 1.0 (outside).

​
Individual Border Sides

PropertyTypeDescription
topStacBorderSide?Defines the border for the top side.
rightStacBorderSide?Defines the border for the right side.
bottomStacBorderSide?Defines the border for the bottom side.
leftStacBorderSide?Defines the border for the left side.
:::note When any individual border side is specified (top, right, bottom, or left), the system will use individual border mode and ignore the uniform border properties (color, width, borderStyle, strokeAlign). :::

​
Examples

​
Uniform Border (All Sides)

StacBorder(
  color: StacColors.red,
  width: 2.0,
  borderStyle: StacBorderStyle.solid,
  strokeAlign: 0.0,
)

​
Individual Border Sides

StacBorder(
  top: StacBorderSide(color: StacColors.red, width: 2.0, style: StacBorderStyle.solid, strokeAlign: 0.0),
  right: StacBorderSide(color: StacColors.green, width: 1.0, style: StacBorderStyle.solid),
  bottom: StacBorderSide(color: StacColors.blue, width: 3.0, style: StacBorderStyle.solid),
  left: StacBorderSide(color: StacColors.yellow, width: 1.5, style: StacBorderStyle.solid),
)

​
Partial Border Sides

You can specify only some sides, and the others will default to BorderSide.none: 
StacBorder(
  top: StacBorderSide(color: StacColors.red, width: 2.0, style: StacBorderStyle.solid),
  bottom: StacBorderSide(color: StacColors.blue, width: 2.0, style: StacBorderStyle.solid),
)

​
Complete Container Example

StacContainer(
  width: 200,
  height: 100,
  decoration: StacBoxDecoration(
    color: StacColors.grey,
    border: StacBorder(
      top: StacBorderSide(color: StacColors.red, width: 3.0, style: StacBorderStyle.solid),
      right: StacBorderSide(color: StacColors.green, width: 2.0, style: StacBorderStyle.solid),
      bottom: StacBorderSide(color: StacColors.blue, width: 3.0, style: StacBorderStyle.solid),
      left: StacBorderSide(color: StacColors.yellow, width: 2.0, style: StacBorderStyle.solid),
    ),
    borderRadius: StacBorderRadius(topLeft: 8.0, topRight: 8.0, bottomLeft: 8.0, bottomRight: 8.0),
  ),
  child: StacCenter(
    child: StacText(
      data: 'Custom Borders',
      style: StacTextStyle(fontSize: 16, fontWeight: StacFontWeight.bold),
    ),
  ),
)

​
See Also