zeba_academy_clipper

A lightweight, customizable Flutter package that provides beautiful clipping shapes for modern user interfaces. Create visually appealing layouts using Wave, Arc, Ticket, Diagonal, and Blob clippers with minimal code.

✨ Features

🌊 Wave Clipper
🌈 Arc Clipper
🎟️ Ticket Clipper
📐 Diagonal Clipper
🫧 Blob Clipper
⚡ Lightweight and fast
🎨 Fully customizable
📱 Responsive on all screen sizes
🚀 Zero third-party dependencies
❤️ Easy integration with ClipPath

Installation

Add the dependency to your pubspec.yaml.

dependencies:
  zeba_academy_clipper: ^1.0.0

Then install packages.

flutter pub get

Import

import 'package:zeba_academy_clipper/zeba_academy_clipper.dart';

Available Clippers

Clipper	Description
WaveClipper	Creates a smooth wave-shaped edge
ArcClipper	Creates a curved arc edge
TicketClipper	Creates a ticket-style cutout
DiagonalClipper	Creates diagonal edges
BlobClipper	Creates an organic blob shape

Wave Clipper

ClipPath(
  clipper: const WaveClipper(),
  child: Container(
    height: 200,
    color: Colors.blue,
  ),
)

Arc Clipper

ClipPath(
  clipper: const ArcClipper(),
  child: Container(
    height: 200,
    color: Colors.orange,
  ),
)

Ticket Clipper

ClipPath(
  clipper: const TicketClipper(),
  child: Container(
    height: 200,
    color: Colors.green,
  ),
)

Diagonal Clipper

ClipPath(
  clipper: const DiagonalClipper(),
  child: Container(
    height: 200,
    color: Colors.purple,
  ),
)

Blob Clipper

ClipPath(
  clipper: const BlobClipper(),
  child: Container(
    height: 220,
    color: Colors.red,
  ),
)

Reusable ClippedContainer

ClippedContainer(
  clipper: const WaveClipper(),
  child: Container(
    width: 300,
    height: 180,
    color: Colors.blue,
  ),
)

Customization

WaveClipper

const WaveClipper(
  waveHeight: 40,
)

ArcClipper

const ArcClipper(
  arcHeight: 50,
)

TicketClipper

const TicketClipper(
  radius: 20,
)

DiagonalClipper

const DiagonalClipper(
  cutHeight: 40,
)

BlobClipper

const BlobClipper()

Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ClipPath(
            clipper: const WaveClipper(),
            child: Container(
              width: 320,
              height: 200,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

Why zeba_academy_clipper?

Clean API
Beginner-friendly
Production-ready
Lightweight implementation
Highly customizable
Easy to extend
Responsive clipping
Ideal for dashboards, onboarding screens, profile cards, banners, coupons, and modern UI designs

Roadmap

Future releases may include:

Circle Clipper
Hexagon Clipper
Triangle Clipper
Diamond Clipper
Star Clipper
Polygon Clipper
Ribbon Clipper
Speech Bubble Clipper
Cloud Clipper
Heart Clipper
ZigZag Clipper
Coupon Clipper
Folded Corner Clipper
Organic Blob Variants
Animated Clippers

Contributing

Contributions, feature requests, bug reports, and pull requests are welcome.

If you have ideas for additional clipping shapes or improvements, feel free to open an issue or submit a pull request.

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to:

Use
Study
Modify
Distribute

under the terms of the GPL-3.0 License. Any distributed modifications must also be licensed under GPL-3.0.

See the LICENSE file for the complete license text.

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at https://sufyanism.com/ or connect with me on https://www.linkedin.com/in/sufyanism.

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, technology, and development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Learn with Zeba Academy

🌐 Main Website https://zeba.academy

💻 Coding Platform https://code.zeba.academy

📺 YouTube https://www.youtube.com/@zeba.academy

📷 Instagram https://www.instagram.com/zeba.academy/

⭐ Support

If you find this package useful, consider:

Giving it a star on GitHub
Liking the package on pub.dev
Sharing it with the Flutter community
Reporting issues and suggesting improvements

Your support helps improve open-source software for everyone.

Made with ❤️ for the Flutter community.

Thank you for visiting!