Gradient - Stac

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

Properties

Property	Type	Description
gradientType	`String?`	Type of gradient: `linear`, `radial`, or `sweep`.
colors	`List<String>?`	List of colors in the gradient.
stops	`List<double>?`	Stop positions for each color (0.0 to 1.0).
begin	`String?`	Starting alignment (for linear gradients).
end	`String?`	Ending alignment (for linear gradients).
center	`String?`	Center alignment (for radial/sweep gradients).
radius	`double?`	Radius (for radial gradients).
focal	`String?`	Focal point alignment (for radial gradients).
focalRadius	`double?`	Radius of focal point (for radial gradients).
startAngle	`double?`	Starting angle in radians (for sweep gradients).
endAngle	`double?`	Ending angle in radians (for sweep gradients).
tileMode	`String?`	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'),
)

{
  "type": "container",
  "decoration": {
    "gradient": {
      "gradientType": "linear",
      "colors": ["#2196F3", "#9C27B0"],
      "begin": "topLeft",
      "end": "bottomRight"
    }
  },
  "child": {
    "type": "text",
    "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,
    ),
  ),
)

{
  "type": "container",
  "decoration": {
    "gradient": {
      "gradientType": "linear",
      "colors": ["#F44336", "#FFEB3B", "#4CAF50"],
      "stops": [0.0, 0.5, 1.0],
      "begin": "topCenter",
      "end": "bottomCenter"
    }
  }
}

Radial Gradient

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

{
  "type": "container",
  "decoration": {
    "gradient": {
      "gradientType": "radial",
      "colors": ["#FFFFFF", "#2196F3"],
      "center": "center",
      "radius": 0.8
    }
  }
}

Sweep Gradient

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

{
  "type": "container",
  "decoration": {
    "gradient": {
      "gradientType": "sweep",
      "colors": ["#F44336", "#4CAF50", "#2196F3", "#F44336"],
      "center": "center"
    }
  }
}

Tile Modes

Mode	Description
`clamp`	Edge colors extend to fill remaining area.
`repeated`	Gradient repeats from start.
`mirror`	Gradient mirrors back and forth.
`decal`	Transparent outside gradient bounds.

StacContainer(
  decoration: StacBoxDecoration(
    gradient: StacGradient.linear(
      colors: [StacColors.blue, StacColors.white],
      begin: StacAlignment.centerLeft,
      end: StacAlignment.center,
      tileMode: StacTileMode.mirror,
    ),
  ),
)

{
  "type": "container",
  "decoration": {
    "gradient": {
      "gradientType": "linear",
      "colors": ["#2196F3", "#FFFFFF"],
      "begin": "centerLeft",
      "end": "center",
      "tileMode": "mirror"
    }
  }
}