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

UNEXPECTED BEHAVIOUR (NOT RECOMMENDED)

📦 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

If this saved you time: Buy Me a Coffee ☕