3

I want to make the same effect as this: https://api.flutter.dev/flutter/widgets/SizeTransition-class.html but starting from the beginning of an image. I tried everything and this does not work!

I tried to put Align in it, to put a container with the width modified by the value of the animation.. nothing works!

I have an animation before, and then it will call forward() on this one when it finishes (there is a function called complete that calls the forward() function).


initState() {
   _sizeController =
        AnimationController(duration: Duration(seconds: 1), vsync: this)
          ..addListener(() {
            setState(() {});
          });

    _sizeAnimation = Tween(begin: 0.0, end: 27.0).animate(CurvedAnimation(
        parent: _sizeController, curve: Curves.fastLinearToSlowEaseIn));
}

AnimatedContainer(
      width: _width,
      height: _height,
      duration: Duration(milliseconds: 200),
      decoration: BoxDecoration(
        color: _color,
        border: Border.all(
            color: Color(0xFF707070), width: 2, style: BorderStyle.solid),
        borderRadius: BorderRadius.circular(14.0),
      ),
      child: SizeTransition(
                    sizeFactor: _sizeAnimation,
                    axis: Axis.horizontal,
                    axisAlignment: -1,
                    child:
                        Center(child: Image.asset('assets/images/check.png')),
                  ),

Or it does nothing or it animates by scaling only.. How can i achieve the same effect as the example video on the widget page? I want that effect to happen showing a checkmark image inside a circle container. And before this the animatedcontainer will be a linear container that turns into the circle, and then the checkmark appears.

Daniel Vilela
  • 587
  • 1
  • 4
  • 19

1 Answers1

0

you need to call _sizeController.forward() to run the animation

Hashem Aboonajmi
  • 13,077
  • 8
  • 66
  • 75