nn_clippers 0.0.2

A gallery of reusable CustomClipper shapes for Flutter: waves, polygons, diagonal/oval borders, and ticket/coupon shapes with notches and scalloped edges.

nn_clippers

A gallery of reusable CustomClipper<Path> shapes for Flutter — waves, polygons, diagonal and oval borders, and ticket / coupon shapes with notches and scalloped punch-hole edges.

Every clipper is const-constructible and implements shouldReclip, so it composes cleanly with ClipPath and only re-clips when its parameters change.

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  nn_clippers: ^0.0.1

Then fetch it:

flutter pub add nn_clippers

And import the library:

import 'package:nn_clippers/nn_clippers.dart';

Quick start

Wrap any widget in a ClipPath and give it one of the clippers:

ClipPath(
  clipper: const WaveClipperOne(),
  child: Container(color: Colors.purple, height: 160),
);

Clippers

Waves

Clipper	Parameters	Description
WaveClipperOne	reverse (bool)	A single, gentle wave along the bottom edge. reverse: true moves it to the top.
WaveClipperTwo	reverse (bool)	A bolder, higher-amplitude wave. reverse supported.

Borders

Clipper	Parameters	Description
OvalTopBorderClipper	holeRadius (double)	Convex oval-shaped top border; holeRadius sets how far it bulges.
RoundedDiagonalPathClipper	radius (double)	Rounded rectangle with a smooth diagonal sweep cutting the top-left corner.

Polygons

Clipper	Parameters	Description
OctagonalClipper	cornerFraction (double, 0.0–0.5)	Octagon. 0.0 is a rectangle, 0.5 a diamond.
HexagonalClipper	reverse (bool)	Hexagon pointing left/right; reverse: true points top/bottom.
ParallelogramClipper	slant (double)	Sheared rectangle. slant is the top-edge offset as a fraction of width.

Tickets & coupons

Clipper	Parameters	Description
TicketClipper	axis, position, notchRadius, cornerRadius	Rounded rectangle with a semicircular notch punched into opposite edges — a tear-off stub.
ScallopedRectClipper	edges, notchRadius	Rectangle lined with evenly-spaced punch-hole notches on the chosen edges.

TicketClipper

ClipPath(
  clipper: const TicketClipper(
    axis: TicketNotchAxis.horizontal, // or .vertical
    position: 0.66,   // where the notch pair sits (fraction of the side)
    notchRadius: 16,  // size of each half-circle notch
    cornerRadius: 12, // outer corner rounding
  ),
  child: Container(color: Colors.red, height: 200),
);

ScallopedRectClipper

ClipPath(
  clipper: const ScallopedRectClipper(
    edges: {ScallopEdge.left, ScallopEdge.right}, // any of top/bottom/left/right
    notchRadius: 10,  // holes stay round; count is derived from the edge length
  ),
  child: Container(color: Colors.deepPurple, height: 120),
);

Recipe: a coupon card

Combine a TicketClipper with a Material elevation for the classic voucher look:

Material(
  elevation: 4,
  color: Colors.red,
  clipBehavior: Clip.antiAlias,
  child: ClipPath(
    clipper: const TicketClipper(position: 0.7, notchRadius: 18),
    child: Container(
      padding: const EdgeInsets.all(24),
      child: const Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('20% OFF', style: TextStyle(fontSize: 40, color: Colors.white)),
          Text('Code: 12345678', style: TextStyle(color: Colors.white70)),
        ],
      ),
    ),
  ),
);

Example

A gallery of every clipper lives in example/:

cd example
flutter run

License

MIT © Turbotech