I used canvas.drawLine to show a line but I want user to be able to see it being drawn from one point to another and also, if possible, control the duration of the animation. (something like progress bar but this is my custom widget)
How to show a line being drawn from one point to another?
9.8k views Asked by Keerti Purswani At
2
There are 2 answers
0

use a custom CustomPainter
class that passes Animation
to the super
constructor - that way the CustomPainter#paint()
method is automatically called on each "frame" of the animation:
class MyCustomPainter extends CustomPainter {
List points;
Paint linePaint;
Animation anim;
Size size = Size.zero;
MyCustomPainter(Animation anim) : super(repaint: anim) {
linePaint = Paint()
..style = PaintingStyle.stroke
..color = Colors.red
..strokeCap = StrokeCap.round
..strokeWidth = 16;
this.anim = anim;
}
@override
void paint(Canvas canvas, Size size) {
if (size != this.size) {
print('new size $size');
this.size = size;
Rect r = (Offset.zero & size).deflate(linePaint.strokeWidth * 1.5);
points = [
[r.topLeft, r.bottomLeft], // begins
[r.bottomLeft, r.topRight], // ends
].map((o) => anim.drive(Tween(begin: o[0], end: o[1]))).toList();
}
canvas.drawLine(points[0].value, points[1].value, linePaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
the complete working code would look like this:
import 'package:flutter/material.dart';
void main() {
runApp(AnimatedPainterTest());
}
class AnimatedPainterTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Builder(
builder: (BuildContext context) {
AnimationController controller = AnimationController(
duration: Duration(milliseconds: 500),
vsync: Scaffold.of(context),
);
return Column(
children: <Widget>[
RaisedButton(
onPressed: () => controller.forward(from: 0.0),
child: Text('press me to start the animation'),
),
Expanded(
child: SizedBox.expand(
child: CustomPaint(
painter: MyCustomPainter(controller),
),
),
)
],
);
},
),
),
);
}
}
and the result is:
You can use an AnimationController to control the animation duration.
To draw the line "step by step" you can use a Tween (linear interpolation between a beginning and ending value).
Then you just need to pass the current progress to your line painter and calculate the new width/height on each
paint()
when you callcanvas.drawLine
.Working example :
Then use it like this :
The line will be drawn in the sized box from
0,0
to200,200
in 3 seconds.Result :