perforated_border 1.0.3 copy "perforated_border: ^1.0.3" to clipboard
perforated_border: ^1.0.3 copied to clipboard

Create beautiful perforated and punch-hole borders around widgets with full control over shape, radius, spacing, and edges

Perforated Border

A Flutter package that enables you to create beautiful perforated and punch-hole borders around widgets. Offers full control over shape, radius, spacing, and edge styles, allowing you to customize your widget's border appearance to suit your design needs.

Features #

perforated border preview


Platform Support #

Android iOS macOS Web Linux Windows

UseCases #

usecase_1 usecase_2 usecase_3 usecase_4
usecase_4_1 usecase_4_2 usecase_4_3 usecase_4_2

UNEXPECTED BEHAVIOUR (NOT RECOMMENDED)

usecase_unexpected_behaviour

📦 Getting started #

dependencies:
  perforated_border: ^1.0.0

Run:

flutter pub get

Usage #

Tip

Border Shape Notice
Some shapes may distort if dentRadius, stripeCount, or flatWidth use extreme values.
If the border looks off, adjust the values slightly (trial & error works best).
This behavior will be improve in future updates.

Import the package

import 'package:perforated_border/perforated_border.dart';

PerforatedBorder.
zigzag border preview.

PerforatedBorder(
  options: PerforatedBorderOptions(
    dentRadius: 6,
    flatWidth: 4,
    stripeCount: 15,
    borderSideOptions: BorderSideOptions.allSides(
      color: Colors.black,
      style: PaintingStyle.stroke,
    ),
  ),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: FlutterLogo(size: 60),
  ),
);

WavyBorder.
wavy border preview.

PerforatedBorder(
  options: WavyBorderOptions(
  stripeCount: 15,
  borderSideOptions: BorderSideOptions.allSides(
    color: Colors.black,
    style: PaintingStyle.stroke,
    ),
  ),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: FlutterLogo(size: 60),
  ),
),

ZigZagBorder.
zigzag border preview.

PerforatedBorder(
  options: ZigzagBorderOptions(
    stripeCount: 10,
    borderSideOptions: BorderSideOptions.allSides(
      color: Colors.black,
      style: PaintingStyle.stroke,
    ),
  ),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: FlutterLogo(size: 60),
  ),
),

BumpBorder.
bumper border preview.

PerforatedBorder(
  options: BumperBorderOptions(
    stripeCount: 10,
    borderSideOptions: BorderSideOptions.allSides(
      color: Colors.black,
      style: PaintingStyle.stroke,
    ),
  ),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: FlutterLogo(size: 60),
  ),
),

🧪 Example App #

Full runnable example in: Github

example/lib/main.dart

Additional information #

If you encounter any issues please report them here.

❤️ Support Development #

usecase_unexpected_behaviour

If this saved you time: Buy Me a Coffee ☕

📄 License #

MIT License © 2025 Github

1
likes
160
points
5
downloads

Publisher

unverified uploader

Weekly Downloads

Create beautiful perforated and punch-hole borders around widgets with full control over shape, radius, spacing, and edges

Repository (GitHub)
View/report issues

Topics

#wavy-borders #zigzag-borders #tag #bump-borders #perforated-border

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on perforated_border