SquircleWidgetExtensions extension

Extension to clip any widget into a squircle (rounded square) shape.

A squircle is a shape between a square and a circle, commonly used in modern UI design (e.g., iOS app icons, modern card designs). This extension provides methods to wrap widgets in a ClipPath using Flutter's ContinuousRectangleBorder for visually appealing, smoothly rounded corners that create the characteristic squircle effect.

Performance Considerations

Uses ShapeBorderClipper which is optimized for shape-based clipping
Clip.antiAlias provides smooth edges but may impact performance on complex widgets
Consider using Clip.hardEdge for better performance when anti-aliasing isn't critical

Design Guidelines

The radiusFactor parameter controls the curvature:

Lower values (1.0-2.0): More circular, softer appearance
Medium values (2.5-3.0): Balanced squircle effect (recommended)
Higher values (4.0+): More squared corners with subtle rounding

Common Use Cases

App icons and avatars
Modern card designs
Button shapes
Image containers
UI elements requiring smooth, organic corners

Example:

// Basic usage with default parameters
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
).clipSquircle();

// Custom radius factor for more circular appearance
Image.asset('avatar.png').clipSquircle(2.0);

// Performance-optimized for simple shapes
Card(child: content).clipSquircle(3.0, Clip.hardEdge);

Performance Considerations

Design Guidelines

Common Use Cases

Methods

exui library