My rectangle Animation does not enlarge from the center but from the first vertex expanding to the right

50 views Asked by At

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;
}
1

There are 1 answers

0
John smith On

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 rectangle

but I do not understand the reason behind now is working