nn_clippers 0.1.0

A collection of reusable CustomClipper<Path> shapes for Flutter including waves, polygons, tickets, coupons, borders, and creative UI clipping effects.

nn_clippers

A powerful collection of reusable CustomClipper<Path> shapes for Flutter.

Build modern, creative, and highly customizable user interfaces using ready-made clipping paths including waves, polygons, diagonal cuts, oval borders, tickets, coupons, scalloped edges, and more.

Features

✨ Production-ready Flutter clippers

✨ Wave, polygon, border, ticket, and coupon shapes

✨ Flexible and composable design

✨ Works with ClipPath, PhysicalShape, CustomPaint, and animations

✨ Const constructors for better performance

✨ Smart shouldReclip implementations

✨ Easy integration into any Flutter project

Perfect For

• Landing Pages
• Profile Cards
• Product Cards
• Dashboards
• Coupon Systems
• Event Tickets
• Loyalty Cards
• E-Commerce Apps
• Fintech Apps
• Creative UI Designs

Philosophy

nn_clippers is designed to give Flutter developers complete freedom.

The provided clippers are building blocks—not predefined components. Use them with gradients, images, shadows, animations, custom painters, glassmorphism effects, or any widget that accepts a CustomClipper<Path>.

If Flutter supports clipping, nn_clippers works with it.

Why nn_clippers?

Instead of writing custom paths from scratch for every project, use a collection of reusable, optimized clippers that help you build beautiful interfaces faster while keeping your code clean and maintainable.

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