DashedDecoration constructor

const DashedDecoration({
  1. Gradient? gradient,
  2. Color? color,
  3. double step = 2.0,
  4. double span = 2.0,
  5. int pointCount = 0,
  6. double? pointWidth,
  7. Radius? radius,
  8. double strokeWidth = 1.0,
  9. double animationOffset = 0.0,
  10. bool enableCaching = true,
})

A custom Decoration that draws a dashed (or dotted) border around a widget such as a Container, Card, or any Box widget.

Supports:

  • Solid dashes and dot-dash patterns
  • Configurable spacing, thickness, corner radius
  • Optional gradient or solid color
  • Animation support with marching ants effect (v1.1.0)
  • Custom dash patterns with arrays (v1.1.0)
  • Performance optimization with path caching (v1.1.0)

Example:

Container(
  decoration: DashedDecoration(
    step: 4,
    span: 2,
    strokeWidth: 1,
    radius: Radius.circular(12),
    color: Colors.blue,
  ),
)

// With animation
Container(
  decoration: DashedDecoration.animated(
    step: 4,
    span: 2,
    animationOffset: animationValue * 10,
    color: Colors.blue,
  ),
)

// With custom pattern
Container(
  decoration: DashedDecoration.pattern(
    dashPattern: [8, 4, 2, 4],
    color: Colors.blue,
  ),
)

Implementation

const DashedDecoration({
  this.gradient,
  this.color,
  this.step = 2.0,
  this.span = 2.0,
  this.pointCount = 0,
  this.pointWidth,
  this.radius,
  this.strokeWidth = 1.0,
  this.animationOffset = 0.0,
  this.enableCaching = true,
}) : dashPattern = null;