# dotted_border 3.1.0

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




## Installing
```
export PUB_HOSTED_URL=https://pub.mirror.p-hatan.ir
flutter pub add 'dotted_border:3.1.0'
```
Published: 2025-06-29T06:20:22.230093Z
Expected archive SHA-256: 99b091ec6891ba0c5331fdc2b502993c7c108f898995739a73c6845d71dad70c

Available in cache; verification: upstream_checksum
## Direct dependencies
- flutter: map[sdk:flutter]

## Package README (untrusted upstream documentation)
# Dotted Border

[![pub package](https://img.shields.io/badge/pub-3.1.0-blue.svg)](https://pub.dev/packages/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

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

### BorderTypes

This package supports the following border options
 * CustomPath
 * RoundedRect
 * Rect
 * Circular
 * Oval

#### Example

```dart
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
```dart
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

```dart
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](assets/image.png?raw=true "Flutter Dotted Border Image" )

### Credits

* [Flutter Path Drawing](https://github.com/dnfield/flutter_path_drawing) - [Dan Field](https://github.com/dnfield)

## Changelog
### [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.