0

How to make it possible to Center the Animation? I'm using the https://pub.dev/packages/simple_animations package.

I have a Stack with multiple Positioned Widgets, with Animations as childs. The issue is that the animation is not animating from the Center but from the top left corner. Here is the Code with just one Positioned inside the Stack.

Does anyone know how to let the animation start from the Center?

Thanks

Stack(children: [
Positioned(
  right: 15.0,
  top: 10.0,
  child: AnimRectangle(),
)],);


enum AniProps { width, height, color }

class AnimRectangle extends StatelessWidget {

  final tween = MultiTween<AniProps>()
    ..add(AniProps.width, 0.0.tweenTo(40.0), 1000.milliseconds)
    ..add(AniProps.width, 40.0.tweenTo(5.0), 500.milliseconds)
    ..add(AniProps.height, 0.0.tweenTo(50.0), 2500.milliseconds)
    ..add(AniProps.color, Colors.red.tweenTo(Colors.blue), 3.seconds);

  @override
  Widget build(BuildContext context) {
    return PlayAnimation<MultiTweenValues<AniProps>>(
            tween: tween, // Pass in tween
            duration: tween.duration, // Obtain duration from MultiTween
            builder: (context, child, value) {
              return Container(
                width: value.get(AniProps.width), 
                height: value.get(AniProps.height),
                color: value.get(AniProps.color),
              );
            },
    );
  }
}
midi
  • 3,128
  • 5
  • 30
  • 47

2 Answers2

0

I solved it putting a SizedBox inside the Positioned Widget!

Stack(children: [
Positioned(
  right: 15.0,
  top: 10.0,
  child:SizedBox(
    height: 60,
    width: 60,
  child: AnimRectangle(),
  ),
)],);
midi
  • 3,128
  • 5
  • 30
  • 47
0

You can simply use the alignment option present in Stack

child: Stack(
  alignment: Alignment.center,
  children: <Widget>[

  ],
),
Ashok
  • 3,190
  • 15
  • 31
  • It's not working for me with alignment: Alignment.center, – midi Nov 13 '20 at 18:16
  • A Stack allows you to stack elements on top of each other, with the last element in the array taking the highest priority. You can use Align, Positioned, or Container to position the children of a stack – Ashok Nov 13 '20 at 18:19