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'),
)

{
  "type": "container",
  "decoration": {
    "color": "#2196F3",
    "borderRadius": 16.0
  },
  "child": {
    "type": "text",
    "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'),
)

{
  "type": "container",
  "decoration": {
    "color": "#FFFFFF",
    "border": {
      "color": "#2196F3",
      "width": 2.0
    },
    "borderRadius": 8.0
  },
  "padding": 16.0,
  "child": {
    "type": "text",
    "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'),
)

{
  "type": "container",
  "decoration": {
    "color": "#FFFFFF",
    "borderRadius": 12.0,
    "boxShadow": [
      {
        "color": "#000000",
        "blurRadius": 10.0,
        "offset": { "x": 0.0, "y": 4.0 },
        "spreadRadius": 0.0
      }
    ]
  },
  "padding": 20.0,
  "child": {
    "type": "text",
    "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),
  ),
)

{
  "type": "container",
  "decoration": {
    "gradient": {
      "gradientType": "linear",
      "colors": ["#9C27B0", "#2196F3"],
      "begin": "topLeft",
      "end": "bottomRight"
    },
    "borderRadius": 16.0
  },
  "padding": 24.0,
  "child": {
    "type": "text",
    "data": "Gradient Background",
    "style": { "color": "#FFFFFF" }
  }
}

​
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,
      ),
    ),
  ),
)

{
  "type": "container",
  "width": 100.0,
  "height": 100.0,
  "decoration": {
    "color": "#2196F3",
    "shape": "circle"
  },
  "child": {
    "type": "center",
    "child": {
      "type": "text",
      "data": "A",
      "style": {
        "color": "#FFFFFF",
        "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,
        ),
      ),
    ],
  ),
)

{
  "type": "container",
  "decoration": {
    "gradient": {
      "gradientType": "linear",
      "colors": ["#2196F3", "#9C27B0"],
      "begin": "topCenter",
      "end": "bottomCenter"
    },
    "border": {
      "color": "#FFFFFF",
      "width": 2.0
    },
    "borderRadius": 20.0,
    "boxShadow": [
      {
        "color": "#000000",
        "blurRadius": 15.0,
        "offset": { "x": 0.0, "y": 8.0 }
      }
    ]
  },
  "padding": 32.0,
  "child": {
    "type": "column",
    "mainAxisSize": "min",
    "children": [
      { "type": "icon", "icon": "star", "color": "#FFC107", "size": 48.0 },
      { "type": "sizedBox", "height": 16.0 },
      {
        "type": "text",
        "data": "Premium Card",
        "style": {
          "color": "#FFFFFF",
          "fontSize": 24.0,
          "fontWeight": "bold"
        }
      }
    ]
  }
}