Skip to main content
The Stac Gradient class allows you to create gradients for backgrounds. It supports linear, radial, and sweep gradients.

​
Properties

PropertyTypeDescription
gradientTypeString?Type of gradient: linear, radial, or sweep.
colorsList<String>?List of colors in the gradient.
stopsList<double>?Stop positions for each color (0.0 to 1.0).
beginString?Starting alignment (for linear gradients).
endString?Ending alignment (for linear gradients).
centerString?Center alignment (for radial/sweep gradients).
radiusdouble?Radius (for radial gradients).
focalString?Focal point alignment (for radial gradients).
focalRadiusdouble?Radius of focal point (for radial gradients).
startAngledouble?Starting angle in radians (for sweep gradients).
endAngledouble?Ending angle in radians (for sweep gradients).
tileModeString?Tile mode: clamp, repeated, mirror, or decal.

​
Linear Gradient

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.linear(
      colors: [StacColors.blue, StacColors.purple],
      begin: StacAlignment.topLeft,
      end: StacAlignment.bottomRight,
    ),
  ),
  child: StacText(data: 'Linear Gradient'),
)

​
Linear Gradient with Stops

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.linear(
      colors: [StacColors.red, StacColors.yellow, StacColors.green],
      stops: [0.0, 0.5, 1.0],
      begin: StacAlignment.topCenter,
      end: StacAlignment.bottomCenter,
    ),
  ),
)

​
Radial Gradient

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.radial(
      colors: [StacColors.white, StacColors.blue],
      center: StacAlignment.center,
      radius: 0.8,
    ),
  ),
)

​
Sweep Gradient

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.sweep(
      colors: [StacColors.red, StacColors.green, StacColors.blue, StacColors.red],
      center: StacAlignment.center,
    ),
  ),
)

​
Tile Modes

ModeDescription
clampEdge colors extend to fill remaining area.
repeatedGradient repeats from start.
mirrorGradient mirrors back and forth.
decalTransparent outside gradient bounds.
StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.linear(
      colors: [StacColors.blue, StacColors.white],
      begin: StacAlignment.centerLeft,
      end: StacAlignment.center,
      tileMode: StacTileMode.mirror,
    ),
  ),
)