animated_lines 1.0.2 animated_lines: ^1.0.2 copied to clipboard
Draws animated lines between two points.Supports both straight lines as well as curved lines with a given radius.
Draws Animated Curved and Straight Lines between two points.
Usage #
Creating a Curved Line
var curvedLine = LineInfo(
source: Offset.zero,
destination: const Offset(100, 100),
backgroundLineColor: Colors.black,
progressLineColor: Colors.lightGreen,
lineStyle: LineStyle.curved(),
strokeStyle: StrokeStyle.dashed(),
animationCount: 4,
);
Creating a Straight Line
var straightLine = LineInfo(
source: Offset.zero,
destination: const Offset(100, 100),
backgroundLineColor: Colors.black,
progressLineColor: Colors.lightGreen,
lineStyle: LineStyle.straight(),
strokeStyle: StrokeStyle.dashed(),
animationCount: 4,
);
Dashed stroke can be achieved by configuring the strokeStyle as
var strokeStyle = StrokeStyle.dashed(gapLength: 5,dashLength: 5);
gapLength
and dashLength
are both optional
Plain stroke can be achieved by configuring the strokeStyle as
var strokeStyle = StrokeStyle.plain();
Straight Line can be achieved by configuring the lineStyle as
var lineStyle = LineStyle.straight();
Curved Line can be achieved by configuring the lineStyle as
var strokeStyle = LineStyle.curved(radius: 100,isClockwise: true);
radius
and isClockwise
are both optional
Animating progress
line.animate();
providing animationCount < 0
while creating line object denotes animation to continue indefinitely.
Stopping animation
line.stopAnimation();
Resetting animation
line.resetAnimation();
Listening to animation end
line.onAnimationComplete = () {
//TODO: Execute Code On animation end
};
Properties of LineInfo Object can be updated as
line.update(
source: const Offset(2, 5),
backgroundLineColor: Colors.blue,
progress: 0.2,
);