I am trying to create a square animation from the centrum of the screen that opens up from the center(starting really small and enlarge itself growing from the centrum of the square, unfortunately what is happening with my code is that giving the animation as parameter to the Rectangle in the CustomPaint
as Size(transitionTween.value, transitionTween.value)
the animation is not growing from
the center out but starts from the left/up vertex first, enlarging the rectangle to the right instead from the center. How can I obtain the effect to make my animation starting and enlarging from the center
import 'package:flutter/material.dart';
class PointToCircle extends StatefulWidget {
@override
_PointToCircleState createState() => _PointToCircleState();
}
class _PointToCircleState extends State<PointToCircle>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> transitionTween;
// Animation<BorderRadius> borderRadius;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
transitionTween = Tween<double>(
begin: 1.0,
end: 200.0,
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
),
);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return Scaffold(
body: new Center(
child: CustomPaint(
painter: OpenPainter(transitionTween),
)));
},
);
}
}
class OpenPainter extends CustomPainter {
Animation<double> transitionTween;
OpenPainter(this.transitionTween);
@override
void paint(Canvas canvas, Size size) {
var paint1 = Paint()
..color = Colors.blue
..style = PaintingStyle.stroke;
canvas.drawRect(
Offset(-50, -100) & Size(transitionTween.value, transitionTween.value),
paint1);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
Found the solution is to add a
size:Size(transition.value,transition.value);
in the Custom paint, leaving also the dynamic tween inside the Size of the rectanglebut I do not understand the reason behind now is working