applyRepeatingLinear method

Gradient applyRepeatingLinear({
  1. required List<Color> colors,
  2. double? angle,
  3. LinearGradientDirection? direction,
  4. List<Dim>? stops,
})

Adds a repeating linear gradient.

Example

final stripes = Gradient()
  ..applyRepeatingLinear(
    colors: const [Color('#000000'), Color('#ffffff')],
    angle: 45,
    stops: const [Dim.px(0), Dim.px(20)],
  );
  • colors: List of stop colors.
  • angle: Angle of the gradient. It will be normalized to be within the 0-360 range.
  • direction: Linear gradient direction (e.g., LinearGradientDirection.toRight).
  • stops: Optional stops corresponding to colors. Accepts length or percentage units (e.g., Dim.percent(50), Dim.px(20), Dim.rem(1.5)). Unitless numbers are not valid CSS.

Implementation

Gradient applyRepeatingLinear({
  required List<Color> colors,
  double? angle,
  LinearGradientDirection? direction,
  List<Dim>? stops,
}) {
  final List<String> parts = [];

  if (angle != null) {
    angle = angle % 360;
    parts.add('${angle}deg');
  } else if (direction != null) {
    parts.add(direction.value);
  }

  for (int i = 0; i < colors.length; i++) {
    final colorStr = colors[i].value;

    if (stops != null && i < stops.length) {
      parts.add('$colorStr ${stops[i]}');
    } else {
      parts.add(colorStr);
    }
  }

  _gradients.add(GradientType.repeatingLinear.cssText(parts));

  return this;
}