Flexi Border #

A Flutter package that lets you draw customizable borders on any subset of the four sides of a widget, with support for:

• Solid or dashed lines via dashPattern
• Half or full segment lengths (BorderMode) with optional +/- offsets
• Per‐side start/end offsets to tweak exactly where each segment begins and ends
• Rounded corners (when not using customPath), or manual corner arcs when you need full control

📦 Installation #

Add to your pubspec.yaml:

dependencies:
  flexi_border: ^0.0.2

Then:

flutter pub get

Import in your Dart code:

import 'package:flexi_border/flexi_border.dart';

🚀 Usage #

Flutter Examples #

1️⃣ Solid Thick Border

FlexiBorder(
  borderColor: Colors.white,
  strokeWidth: 10,                // thick line
  dashPattern: [],                // empty => solid
  drawTop: true,
  drawRight: true,
  drawBottom: true,
  drawLeft: true,
  borderMode: BorderMode.full,
  child: Container(
    width: 300,
    height: 90,
    color: Colors.black,
    alignment: Alignment.center,
    child: Text(
      "Solid Thick Border",
      style: TextStyle(color: Colors.white),
    ),
  ),
)

2️⃣ Evenly Dashed Medium Border

FlexiBorder(
  borderColor: Colors.cyanAccent,
  strokeWidth: 2,
  dashPattern: [10, 10],          // 10px dash / 10px gap
  drawTop: true,
  drawRight: true,
  drawBottom: true,
  drawLeft: true,
  borderMode: BorderMode.full,
  child: Container(
    width: 300,
    height: 90,
    color: Colors.black,
    alignment: Alignment.center,
    child: Text(
      "Dashed Medium Border",
      style: TextStyle(color: Colors.white),
    ),
  ),
)

3️⃣ Mixed‐Style Custom Side

FlexiBorder(
  borderColor: Colors.orangeAccent,
  strokeWidth: 2,
  dashPattern: [5, 2],            // 5px dash / 2px gap
  drawTop: true,
  drawRight: false,               // skip the right edge
  drawBottom: true,
  drawLeft: true,
  borderMode: BorderMode.half + 20,
  child: Container(
    width: 300,
    height: 90,
    padding: EdgeInsets.symmetric(horizontal: 16),
    color: Colors.black,
    child: Row(
      children: [
        Text(
          "👋 I'm Shanu",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ],
    ),
  ),
)

🌐 Live Preview #

1️⃣ Solid Thick Border #

[Solid Thick Border]

2️⃣ Evenly Dashed Medium Border #

[Dashed Medium Border]

3️⃣ Mixed-Style Custom Side #

[Mixed-Style Border]

📖 API Reference #

Import:

import 'package:flexi_border/flexi_border.dart';

FlexiBorder Widget #

BorderMode #

✅ Contributing #

PRs welcome! Feel free to open issues or submit pull requests on GitHub.

📜 License #

MIT © 2025 Shanu33