applyRepeatingConic method

Gradient applyRepeatingConic({
  1. required List<Color> colors,
  2. double? angle,
  3. ConicGradientPosition? position,
  4. List<Dim>? stops,
})

Adds a repeating conic gradient.

Example

final pinwheel = Gradient()
  ..applyRepeatingConic(
    colors: const [Color('#ff0000'), Color('#00ff00'), Color('#0000ff')],
    angle: 0,
    position: ConicGradientPosition.center,
    stops: const [Dim.deg(0), Dim.deg(20), Dim.deg(40)],
  );
  • colors: List of stop colors.
  • angle: Starting angle of rotation between 0 and 360.
  • position: Position of the gradient center (e.g., ConicGradientPosition.center).
  • stops: Optional stops corresponding to colors. Accepts angle or percentage units (e.g., Dim.deg(90), Dim.percent(50)). Length units (px, rem) are not valid for conic gradients.

Implementation

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

  if (angle != null && position != null) {
    angle = angle % 360;
    parts.add('from ${angle}deg at ${position.value}');
  } else if (angle != null) {
    angle = angle % 360;
    parts.add('from ${angle}deg');
  } else if (position != null) {
    parts.add('at ${position.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.repeatingConic.cssText(parts));

  return this;
}