flutter_draw_dashed_line

Description:

flutter draw dashed line

flutter_draw_dashed_line #
Library for drawing dashed lines in Flutter.
Usage: #
Draw a dashed rectangle with animated dashes that move around the border:
[]
class DashedRectWidget extends StatefulWidget {
const DashedRectWidget({super.key});

@override
State<DashedRectWidget> createState() => _DashedRectWidgetState();
}

class _DashedRectWidgetState extends State<DashedRectWidget> {
var dashOffset = 0.0;
late Timer timer;

@override
void initState() {
super.initState();
// Update dash offset every 100ms
timer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
setState(() {
dashOffset += 1.5;
});
});
}

@override
void dispose() {
timer.cancel();
super.dispose();
}

@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return SizedBox(
width: width,
height: width,
child: RepaintBoundary(
child: CustomPaint(
painter: DashedRectPainter(
rect: const Rect.fromLTWH(0, 0, 100, 100),
colorOuter: Colors.blueGrey,
colorInner: Colors.white,
strokeWidthOuter: 3.5,
strokeWidthInner: 1.5,
dashLen: 15.0,
gapLen: 5.0,
offset: dashOffset,
),
),
),
);
}
}
copied to clipboard
You can also use DashedPathGenerator.generatePathFromPolyline or DashedPathGenerator.generatePathFromRect to generate dashed Path objects that you can manually render.