Skip to main content
The Stac BoxDecoration class provides a rich set of properties to decorate a container including colors, borders, gradients, shadows, and images.

​
Properties

PropertyTypeDescription
colorString?Background color of the box.
imageMap<String, dynamic>?Background image configuration.
borderMap<String, dynamic>?Border around the box.
borderRadiusMap<String, dynamic>?Border radius for rounded corners.
boxShadowList<Map>?List of shadow configurations.
gradientMap<String, dynamic>?Background gradient (takes precedence over color).
backgroundBlendModeString?Blend mode for background.
shapeString?Shape: rectangle or circle.

​
Basic Example

StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.blue,
    borderRadius: StacBorderRadius.all(16.0),
  ),
  child: StacText(data: 'Decorated Box'),
)

​
With Border

StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.white,
    border: StacBorder(
      color: StacColors.blue,
      width: 2.0,
    ),
    borderRadius: StacBorderRadius.all(8.0),
  ),
  padding: StacEdgeInsets.all(16.0),
  child: StacText(data: 'Bordered Box'),
)

​
With Shadow

StacContainer(
  decoration: StacBoxDecoration(
    color: StacColors.white,
    borderRadius: StacBorderRadius.all(12.0),
    boxShadow: [
      StacBoxShadow(
        color: StacColors.black,
        blurRadius: 10.0,
        offset: StacOffset(x: 0.0, y: 4.0),
        spreadRadius: 0.0,
      ),
    ],
  ),
  padding: StacEdgeInsets.all(20.0),
  child: StacText(data: 'Card with Shadow'),
)

​
With Gradient

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.linear(
      colors: [StacColors.purple, StacColors.blue],
      begin: StacAlignment.topLeft,
      end: StacAlignment.bottomRight,
    ),
    borderRadius: StacBorderRadius.all(16.0),
  ),
  padding: StacEdgeInsets.all(24.0),
  child: StacText(
    data: 'Gradient Background',
    style: StacTextStyle(color: StacColors.white),
  ),
)

​
Circle Shape

StacContainer(
  width: 100.0,
  height: 100.0,
  decoration: StacBoxDecoration(
    color: StacColors.blue,
    shape: StacBoxShape.circle,
  ),
  child: StacCenter(
    child: StacText(
      data: 'A',
      style: StacTextStyle(
        color: StacColors.white,
        fontSize: 32.0,
      ),
    ),
  ),
)

​
Complete Example

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.linear(
      colors: [StacColors.blue, StacColors.purple],
      begin: StacAlignment.topCenter,
      end: StacAlignment.bottomCenter,
    ),
    border: StacBorder(
      color: StacColors.white,
      width: 2.0,
    ),
    borderRadius: StacBorderRadius.all(20.0),
    boxShadow: [
      StacBoxShadow(
        color: StacColors.black,
        blurRadius: 15.0,
        offset: StacOffset(x: 0.0, y: 8.0),
      ),
    ],
  ),
  padding: StacEdgeInsets.all(32.0),
  child: StacColumn(
    mainAxisSize: StacMainAxisSize.min,
    children: [
      StacIcon(icon: 'star', color: StacColors.amber, size: 48.0),
      StacSizedBox(height: 16.0),
      StacText(
        data: 'Premium Card',
        style: StacTextStyle(
          color: StacColors.white,
          fontSize: 24.0,
          fontWeight: StacFontWeight.bold,
        ),
      ),
    ],
  ),
)