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.6

Then:

flutter pub get

Import in your Dart code:

import 'package:flexi_border/flexi_border.dart';

🚀 Usage #

Flutter Examples #

1️⃣ Corner Border

FlexiBorder(
                borderMode: BorderMode.full,
                topStartOffset:4.8,
                topEndOffset: -300/2,
                leftStartOffset:4.8,
                rightStartOffset: 4.8,
                bottomStartOffset: 4.8,
                bottomEndOffset: -300/2,
                strokeWidth: 1,
                dashPattern: [10,10],
                borderColor: Colors.white,

                child: Container(
                    width:300,
                    height:90,
                    decoration: BoxDecoration(
                      color:Colors.black,
                    ),
                    child:Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/hi.gif',
                          width: 70,
                          height:70,
                        ),
                        SizedBox(
                          width: 10,
                          height: 90
                        ),
                        Text("I'm Shanu",
                          style: TextStyle(
                            fontSize: 40,
                            color: Colors.white
                          ),
                        )
                      ],
                    ),
                  )
                      ),

2️⃣ Evenly Dashed Border

FlexiBorder(
                borderMode: BorderMode.full,
                topStartOffset:4.8,
                topEndOffset: -300/2,
                leftStartOffset:4.8,
                rightStartOffset: 4.8,
                bottomStartOffset: 4.8,
                bottomEndOffset: -300/2,
                strokeWidth: 10,
                dashPattern: [6,1],
                borderColor: Colors.white,

                child: Container(
                    width:300,
                    height:90,
                    decoration: BoxDecoration(
                      color:Colors.black,
                    ),
                    child:Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/hi.gif',
                          width: 70,
                          height:70,
                        ),
                        SizedBox(
                          width: 10,
                          height: 90
                        ),
                        Text("I'm Shanu",
                          style: TextStyle(
                            fontSize: 40,
                            color: Colors.white
                          ),
                        )
                      ],
                    ),
                  )
                      ),

3️⃣ Half Rectangle Side

FlexiBorder(
                borderMode: BorderMode.full,
                drawRight: false,
                topStartOffset:4.8,
                topEndOffset: -300/2,
                leftStartOffset:4.8,
                rightStartOffset: 4.8,
                bottomEndOffset: 4.8,
                bottomStartOffset: -300/2,
                strokeWidth: 2,
                dashPattern: [5,5],
                borderColor: Colors.white,

                child: Container(
                    width:300,
                    height:90,
                    decoration: BoxDecoration(
                      color:Colors.black,
                    ),
                    child:Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/hi.gif',
                          width: 70,
                          height:70,
                        ),
                        SizedBox(
                          width: 10,
                          height: 90
                        ),
                        Text("I'm Shanu",
                          style: TextStyle(
                            fontSize: 40,
                            color: Colors.white
                          ),
                        )
                      ],
                    ),
                  )
                      ),

🌐 Preview #

1️⃣ Corner Border #

2️⃣ Evenly Dashed Border #

3️⃣ Half Rectangle Side #

📖 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

☕ Support Me #

If you find my work useful, consider supporting me: