https://github.com/ajilo297/flutter-dotted-border
A Flutter package to easily add dashed borders around widgets
https://github.com/ajilo297/flutter-dotted-border
dart flutter widget
Last synced: about 1 month ago
JSON representation
A Flutter package to easily add dashed borders around widgets
- Host: GitHub
- URL: https://github.com/ajilo297/flutter-dotted-border
- Owner: ajilo297
- License: mit
- Created: 2019-05-20T16:31:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-19T18:05:29.000Z (11 months ago)
- Last Synced: 2024-06-21T06:36:45.994Z (11 months ago)
- Topics: dart, flutter, widget
- Language: Dart
- Homepage: https://pub.dev/packages/dotted_border
- Size: 456 KB
- Stars: 280
- Watchers: 2
- Forks: 60
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Dotted Border
[](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(
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
```dart
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
```dart
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
```dart
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](https://github.com/TarekkMA)
You can set a [`StrokeCap`](https://api.flutter.dev/flutter/dart-ui/StrokeCap-class.html) to the border line endings. It can take three values
* StrokeCap.Round
* StrokeCap.Square
* StrokeCap.Butt
#### Output
### Credits
* [Flutter Path Drawing](https://github.com/dnfield/flutter_path_drawing) - [Dan Field](https://github.com/dnfield)