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