dotted_border 1.0.6

Flutter Android iOS web

A flutter package to let users easily add a dashed border around any widget.

Dotted Border #

pub package

A flutter package to easily added 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(
    color: Colors.black,
    strokeWidth: 1,
    child: FlutterLogo(size: 148),
)

BorderTypes #

This package supports the following border types at the moment

  • RectBorder
  • RRectBorder
  • CircleBorder
  • OvalBorder

Example

return DottedBorder(
  borderType: BorderType.RRect,
  radius: Radius.circular(12),
  padding: EdgeInsets.all(6),
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(12)),
    child: Container(
      height: 200,
      width: 120,
      color: Colors.amber,
    ),
  ),
);

Dash Pattern #

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

Example

DottedBorder(
    dashPattern: [6, 3, 2, 3], 
    child: ...
);

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

  • 6 pixel wide dash
  • 3 pixel wide space
  • 2 pixel wide dash
  • 3 pixel wide space

Custom Path Border #

You can also specify any path as the customPath property when initializing the DottedBorderWidget, and it will draw it for you using the provided dash pattern.

Example

Path customPath = Path()
  ..moveTo(20, 20)
  ..lineTo(50, 100)
  ..lineTo(20, 200)
  ..lineTo(100, 100)
  ..lineTo(20, 20);

return DottedBorder(
  customPath: (size) => customPath, // PathBuilder
  color: Colors.indigo,
  dashPattern: [8, 4],
  strokeWidth: 2,
  child: Container(
    height: 220,
    width: 120,
    color: Colors.green.withAlpha(20),
  ),
);

Stroke Cap #

PR submitted by Tarekk Mohamed Abdalla

You can set a StrokeCap to the border line endings. It can take three values

  • StrokeCap.Round
  • StrokeCap.Square
  • StrokeCap.Butt

Output

Flutter dotted border image

Credits #

77
likes
110
pub points
97%
popularity

A flutter package to let users easily add a dashed border around any widget.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

ajilo297@gmail.com

License

MIT (LICENSE)

Dependencies

flutter, path_drawing

More

Packages that depend on dotted_border