ajilo297/Flutter-Dotted-Border

Dotted Border

pub package

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

Flutter dotted border image

Credits

• Flutter Path Drawing - Dan Field