custom_clippers 2.0.1

custom_clippers is a package that contains multiple custom clippers and different types of message clippers which you can give to clipper property of ClipPath.

example/lib/main.dart

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

import 'container_to_clip.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Clippers',
      theme: ThemeData(
        primaryColor: Colors.blueAccent,
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ClippersPage(title: 'Custom Clippers'),
    );
  }
}

class ClippersPage extends StatefulWidget {
  const ClippersPage({super.key, required this.title});

  final String title;

  @override
  State<ClippersPage> createState() => _ClippersPageState();
}

class _ClippersPageState extends State<ClippersPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: ListView(
        padding: EdgeInsets.all(20),
        children: [
          /// Multiple Points Clipper top only with height of points as 50
          ClipPath(
            clipper: MultiplePointsClipper(Sides.top, heightOfPoint: 50),
            child: ContainerToClip(Colors.red, 'Multiple Points Clipper Top Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Points Clipper bottom only with height of points as 50
          ClipPath(
            clipper: MultiplePointsClipper(Sides.bottom, heightOfPoint: 50),
            child: ContainerToClip(Colors.green, 'Multiple Points Clipper Bottom Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Points Clipper left only with height of points as 50
          ClipPath(
            clipper: MultiplePointsClipper(Sides.left, heightOfPoint: 50, numberOfPoints: 7),
            child: ContainerToClip(Colors.blue, 'Multiple Points Clipper Left Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Points Clipper right only with height of points as 50
          ClipPath(
            clipper: MultiplePointsClipper(Sides.right, heightOfPoint: 50, numberOfPoints: 7),
            child: ContainerToClip(Colors.yellow, 'Multiple Points Clipper Right Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Points Clipper vertical with number of points as 50
          ClipPath(
            clipper: MultiplePointsClipper(Sides.vertical, numberOfPoints: 50),
            child: ContainerToClip(Colors.red, 'Multiple Points Clipper Vertical'),
          ),

          SizedBox(height: 20),

          /// Multiple Points Clipper horizontal with number of points as 50
          ClipPath(
            clipper: MultiplePointsClipper(Sides.horizontal, numberOfPoints: 20),
            child: ContainerToClip(Colors.green, 'Multiple Points Clipper Horizontal'),
          ),

          SizedBox(height: 20),

          /// Multiple Rounded Points Clipper top only with number of points as 30
          ClipPath(
            clipper: MultipleRoundedPointsClipper(Sides.top, numberOfPoints: 30),
            child: ContainerToClip(Colors.blue, 'Multiple Points Rounded Clipper Top Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Rounded Points Clipper bottom only with number of points as 30
          ClipPath(
            clipper: MultipleRoundedPointsClipper(Sides.bottom, numberOfPoints: 30),
            child: ContainerToClip(Colors.yellow, 'Multiple Points Rounded Clipper Bottom Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Rounded Points Clipper left only with number of points as 30
          ClipPath(
            clipper: MultipleRoundedPointsClipper(Sides.left, numberOfPoints: 13),
            child: ContainerToClip(Colors.red, 'Multiple Points Rounded Clipper Left Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Rounded Points Clipper right only with number of points as 30
          ClipPath(
            clipper: MultipleRoundedPointsClipper(Sides.right, numberOfPoints: 13),
            child: ContainerToClip(Colors.green, 'Multiple Points Rounded Clipper Right Only'),
          ),

          SizedBox(height: 20),

          /// Multiple Rounded Points Clipper vertical with height of points as 50
          ClipPath(
            clipper: MultipleRoundedPointsClipper(Sides.vertical, heightOfPoint: 50),
            child: ContainerToClip(Colors.blue, 'Multiple Rounded Points Clipper Vertical'),
          ),

          SizedBox(height: 20),

          /// Multiple Rounded Points Clipper horizontal with height of points as 50
          ClipPath(
            clipper: MultipleRoundedPointsClipper(
              Sides.horizontal,
              heightOfPoint: 40,
              numberOfPoints: 7,
            ),
            child: ContainerToClip(Colors.yellow, 'Multiple Rounded Points Clipper Horizontal'),
          ),

          SizedBox(height: 20),

          /// Ticket Pass Clipper
          ClipPath(
            clipper: TicketPassClipper(),
            child: ContainerToClip(Colors.red, 'Ticket Pass Clipper'),
          ),

          SizedBox(height: 20),

          /// Ticket Pass Clipper with position as 80 and hole radius as 40
          ClipPath(
            clipper: TicketPassClipper(position: 80, holeRadius: 40),
            child: ContainerToClip(Colors.green, 'Ticket Pass Clipper'),
          ),

          SizedBox(height: 20),

          /// Directional Wave Clipper
          ClipPath(
            clipper: DirectionalWaveClipper(),
            child: ContainerToClip(Colors.blue, 'Directional Wave Clipper Bottom Left'),
          ),

          SizedBox(height: 20),

          /// Directional Wave Clipper with vertical position as VerticalPosition.TOP
          ClipPath(
            clipper: DirectionalWaveClipper(verticalPosition: VerticalPosition.top),
            child: ContainerToClip(Colors.yellow, 'Directional Wave Clipper Top Left'),
          ),

          SizedBox(height: 20),

          /// Directional Wave Clipper with horizontal position as HorizontalPosition.RIGHT
          ClipPath(
            clipper: DirectionalWaveClipper(horizontalPosition: HorizontalPosition.right),
            child: ContainerToClip(Colors.red, 'Directional Wave Clipper Bottom Right'),
          ),

          SizedBox(height: 20),

          /// Directional Wave Clipper with vertical position as VerticalPosition.TOP  and  horizontal position as HorizontalPosition.RIGHT
          ClipPath(
            clipper: DirectionalWaveClipper(
              verticalPosition: VerticalPosition.top,
              horizontalPosition: HorizontalPosition.right,
            ),
            child: ContainerToClip(Colors.green, 'Directional Wave Clipper Top Right'),
          ),

          SizedBox(height: 20),

          /// Sin Cosine Wave Clipper
          ClipPath(
            clipper: SinCosineWaveClipper(),
            child: ContainerToClip(Colors.blue, 'Sin Cosine Wave Clipper Bottom Left'),
          ),

          SizedBox(height: 20),

          /// Sin Cosine Wave Clipper with vertical position as VerticalPosition.TOP
          ClipPath(
            clipper: SinCosineWaveClipper(verticalPosition: VerticalPosition.top),
            child: ContainerToClip(Colors.yellow, 'Sin Cosine Wave Clipper Top Left'),
          ),

          SizedBox(height: 20),

          /// Sin Cosine Wave with horizontal position as HorizontalPosition.RIGHT
          ClipPath(
            clipper: SinCosineWaveClipper(horizontalPosition: HorizontalPosition.right),
            child: ContainerToClip(Colors.red, 'Sin Cosine Wave Clipper Bottom Right'),
          ),

          SizedBox(height: 20),

          /// Sin Cosine Wave Clipper with vertical position as VerticalPosition.TOP  and  horizontal position as HorizontalPosition.RIGHT
          ClipPath(
            clipper: SinCosineWaveClipper(
              verticalPosition: VerticalPosition.top,
              horizontalPosition: HorizontalPosition.right,
            ),
            child: ContainerToClip(Colors.green, 'Sin Cosine Wave Clipper Top Right'),
          ),

          SizedBox(height: 20),

          /// Three Rounded Edges Message Clipper Sender Side
          ClipPath(
            clipper: ThreeRoundedEdgesMessageClipper(MessageType.send),
            child: ContainerToClip(Colors.blue, 'Three Rounded Edges Message Clipper Sender'),
          ),

          SizedBox(height: 20),

          /// Three Rounded Edges Message Clipper Receiver Side
          ClipPath(
            clipper: ThreeRoundedEdgesMessageClipper(MessageType.receive),
            child: ContainerToClip(Colors.yellow, 'Three Rounded Edges Message Clipper Receiver'),
          ),

          SizedBox(height: 20),

          /// Diagonal Rounded Edges Message Clipper Sender Side
          ClipPath(
            clipper: DiagonalRoundedEdgesMessageClipper(MessageType.send),
            child: ContainerToClip(Colors.red, 'Diagonal Rounded Edges Message Clipper Sender'),
          ),

          SizedBox(height: 20),

          /// Diagonal Rounded Edges Message Clipper Receiver Side
          ClipPath(
            clipper: DiagonalRoundedEdgesMessageClipper(MessageType.receive),
            child: ContainerToClip(Colors.green, 'Diagonal Rounded Edges Message Clipper Receiver'),
          ),

          SizedBox(height: 20),

          /// Lower Nip Message Clipper Sender Side
          ClipPath(
            clipper: LowerNipMessageClipper(MessageType.send),
            child: ContainerToClip(Colors.blue, 'Lower Nip Message Clipper Sender'),
          ),

          SizedBox(height: 20),

          /// Lower Nip Message Clipper Receiver Side
          ClipPath(
            clipper: LowerNipMessageClipper(MessageType.receive),
            child: ContainerToClip(Colors.yellow, 'Lower Nip Message Clipper Receiver'),
          ),

          SizedBox(height: 20),

          /// Upper Nip Message Clipper Sender Side
          ClipPath(
            clipper: UpperNipMessageClipper(MessageType.send),
            child: ContainerToClip(Colors.red, 'Upper Nip Message Clipper Sender'),
          ),

          SizedBox(height: 20),

          /// Upper Nip Message Clipper Receiver Side
          ClipPath(
            clipper: UpperNipMessageClipper(MessageType.receive),
            child: ContainerToClip(Colors.green, 'Upper Nip Message Clipper Receiver'),
          ),

          SizedBox(height: 20),

          /// Upper Nip Message Clipper Two Sender Side
          ClipPath(
            clipper: UpperNipMessageClipperTwo(MessageType.send),
            child: ContainerToClip(Colors.blue, 'Upper Nip Message Clipper Two Sender'),
          ),

          SizedBox(height: 20),

          /// Upper Nip Message Clipper Two Receiver Side
          ClipPath(
            clipper: UpperNipMessageClipperTwo(MessageType.receive),
            child: ContainerToClip(Colors.yellow, 'Upper Nip Message Clipper Two Receiver'),
          ),

          SizedBox(height: 20),
        ],
      ),
    );
  }
}