nn_clippers 0.0.1

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:nn_clippers/nn_clippers.dart';

void main() => runApp(const GalleryApp());

class GalleryApp extends StatelessWidget {
  const GalleryApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'nn_clippers gallery',
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: const GalleryPage(),
    );
  }
}

/// A single labelled entry in the gallery.
class _Entry {
  const _Entry(this.label, this.clipper, this.color);
  final String label;
  final CustomClipper<Path> clipper;
  final Color color;
}

class GalleryPage extends StatelessWidget {
  const GalleryPage({super.key});

  static const _entries = <_Entry>[
    _Entry('WaveClipperOne()', WaveClipperOne(), Color(0xFF7B1FA2)),
    _Entry('WaveClipperOne(reverse: true)', WaveClipperOne(reverse: true),
        Color(0xFF512DA8)),
    _Entry('WaveClipperTwo()', WaveClipperTwo(), Color(0xFFF57C00)),
    _Entry('WaveClipperTwo(reverse: true)', WaveClipperTwo(reverse: true),
        Color(0xFFEF6C00)),
    _Entry('OvalTopBorderClipper()', OvalTopBorderClipper(), Color(0xFFFBC02D)),
    _Entry('RoundedDiagonalPathClipper()', RoundedDiagonalPathClipper(),
        Color(0xFFFFA000)),
    _Entry('OctagonalClipper()', OctagonalClipper(), Color(0xFFE53935)),
    _Entry('HexagonalClipper()', HexagonalClipper(), Color(0xFF2196F3)),
    _Entry('HexagonalClipper(reverse: true)', HexagonalClipper(reverse: true),
        Color(0xFF1E88E5)),
    _Entry('ParallelogramClipper()', ParallelogramClipper(), Color(0xFFEC407A)),
    _Entry('TicketClipper()', TicketClipper(), Color(0xFFD32F2F)),
    _Entry('TicketClipper(axis: vertical)',
        TicketClipper(axis: TicketNotchAxis.vertical), Color(0xFF00897B)),
    _Entry(
      'ScallopedRectClipper(left + right)',
      ScallopedRectClipper(edges: {ScallopEdge.left, ScallopEdge.right}),
      Color(0xFF5E35B1),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('nn_clippers gallery')),
      body: ListView.separated(
        padding: const EdgeInsets.all(16),
        itemCount: _entries.length,
        separatorBuilder: (_, __) => const SizedBox(height: 20),
        itemBuilder: (context, i) {
          final e = _entries[i];
          return ClipPath(
            clipper: e.clipper,
            child: Container(
              height: 120,
              alignment: Alignment.center,
              color: e.color,
              child: Text(
                e.label,
                textAlign: TextAlign.center,
                style: const TextStyle(color: Colors.white, fontSize: 15),
              ),
            ),
          );
        },
      ),
    );
  }
}