About
This package allows you to draw dotted lines with Flutter.
Usage
| Parameter | Default | Description |
|---|---|---|
| direction | Axis.horizontal | The direction of the entire dotted line. |
| alignment | WrapAlignment.center | The alignment of the entire dotted line. |
| lineLength | double.infinity | The length of the entire dotted line. |
| lineThickness | 1.0 | The thickness of the entire dotted line. |
| dashLength | 4.0 | The length of the dash. |
| dashColor | Colors.black | The color of the dash. |
| dashGradient | null | The gradient colors of the dash. |
| dashRadius | 0.0 | The radius of the dash. |
| dashGapLength | 4.0 | The length of the dash gap. |
| dashGapColor | Colors.transparent | The color of the dash gap. |
| dashGapGradient | null | The gradient colors of the dash gap. |
| dashGapRadius | 0.0 | The radius of the dash gap. |
| addRepaintBoundary | false | Whether to wrap the dotted line with a RepaintBoundary. |
This can be used without parameters.
import 'package:dotted_line/dotted_line.dart';
DottedLine()
You can also customize by specifying parameters.
import 'package:dotted_line/dotted_line.dart';
DottedLine(
direction: Axis.horizontal,
alignment: WrapAlignment.center,
lineLength: double.infinity,
lineThickness: 1.0,
dashLength: 4.0,
dashColor: Colors.black,
dashGradient: [Colors.red, Colors.blue],
dashRadius: 0.0,
dashGapLength: 4.0,
dashGapColor: Colors.transparent,
dashGapGradient: [Colors.red, Colors.blue],
dashGapRadius: 0.0,
addRepaintBoundary: true,
)
Performance Optimization
If your DottedLine is placed inside a widget that rebuilds frequently, you might experience performance issues (dropped frames) because the dashes and gaps are constantly repainted.
In such cases, setting addRepaintBoundary: true can improve performance by wrapping the DottedLine in a RepaintBoundary, isolating its paint step.
Note: The default is false to prevent unexpected memory overhead. Keep it false if you are displaying hundreds of dotted lines (e.g., in a large list) to avoid excessive memory usage.
Example
The sample code can be found under the example package.
You can try changing all parameters.