Dotted Border

A flutter package to easily add dotted borders around widgets.

Installing

To use this package, add dotted_border as a dependency in your pubspec.yaml file.

Usage

Wrap DottedBorder widget around the child widget

DottedBorder(
                  child: Text(
                    'Rectangular Border',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )
                

BorderTypes

This package supports the following border options

• CustomPath
• RoundedRect
• Rect
• Circular
• Oval

Example

DottedBorder(
                  options: RectDottedBorderOptions(
                    dashPattern: [10, 5],
                    strokeWidth: 2,
                    padding: EdgeInsets.all(16),
                  ),
                  child: Text(
                    'Rectangular Border',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )
                

Dash Pattern

You can also specify the Dash Sequence by passing in an Array of Doubles

Example

RectDottedBorderOptions(
                  dashPattern: [10, 5],
                  strokeWidth: 2,
                  padding: EdgeInsets.all(16),
                )
                

The above code block will render a dashed border with the following pattern:

• 10 pixel wide dash
• 5 pixel wide space

Custom Path Border

You can also specify a customPath property and it will draw it for you using the provided dash pattern.

Example

DottedBorder(
                  options: CustomPathDottedBorderOptions(
                    padding: const EdgeInsets.all(8),
                    color: Colors.purple,
                    strokeWidth: 2,
                    dashPattern: [10, 5],
                    customPath: (size) => Path()
                      ..moveTo(0, size.height)
                      ..relativeLineTo(size.width, 0),
                  ),
                  child: const Text(
                    'Custom Path Border',
                    style: TextStyle(
                      color: Colors.purple,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )
                

Output

Credits

• Flutter Path Drawing - Dan Field

[3.1.0] - 29 Jun, 2025

• Add animation to border
• Add child on top parameter to the border

[3.0.1] - 17 May, 2025

• Format code

[3.0.0] - 17 May, 2025

• BREAKING changes to DottedBorder API

[2.1.0] - 25 September, 2023

• Add StackFit as a parameter

[2.0.0+2] - 5 December, 2021

• Use path_drawing: ^1.0.0

[2.0.0+1] - 10 August, 2021

• Fixed wrong placement for CircleBorder

[2.0.0] - 17 April, 2021

• Move null safety to stable and master

[2.0.0-nullsafety.0] - 23 December, 2020

• Migrated package to use null safety

[1.0.6] - 16 July, 2020

• Formatted code and added code comments

[1.0.5] - 3 March, 2020

• Changed Path property to a PathBuilder so that the size of the child widget is received as a callback

[1.0.4] - 10 December, 2019

• Added check to ensure invalid dash patterns are not entered in the dotted border widget

[1.0.3] - 8 October, 2019

• Added StrokeCap property

[1.0.2] - 9 July, 2019

• Added ability to let users specify their own custom paths as border

[1.0.1] - 3 July, 2019

• Added a basic Dart doc

[1.0.0] - 3 July, 2019

• Add more path options
• Added dash pattern option

[0.1.1] - 20 May, 2019

• Added description

[0.1.0] - 20 May, 2019

• Draw rectangular border around any widget.