[flutter] AnimatedPositioned size change Animation

AnimatedPositioned 을 사용하여 위아래로 움직이는 애니메션을 만들었는데 윈도우(?)의 크기를 조정시 좌우도 애니메이션이 발생하는 현상이 보였습니다.

AnimatedPositioned 애니메이션 문제

Row의 children의 가운데 정렬하기 위해서는 left, right 속성을 반드시 가변적으로 설정해야 하는데 이것이 애미메션으로 작동해서 위와 같은 문제가 발생하고 있다. Stack에 Center 속성 적용시 AnimatedPositioned가 적용되지 않고 AnimatedPositioned child의 Center는 적용이 되지 않는다.

 

그래서 찾은 방법이 Positioned + SlideTransition 이다.

Positioned + SlideTransition 애니메이션

with SingleTickerProviderStateMixin

... 

  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<Offset> _offsetAnimation = Tween<Offset>(
    begin: const Offset(0.0, -0.6),
    end: const Offset(0.0, -0.5),
  ).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
  ));


... 


Positioned(
  child: SlideTransition(
    position: _offsetAnimation,
    child: Center(child: bubbleBox),
  ),
),

SlideTransition를 사용하면 Center 처리도 가능하며 애니메이션 효과도 잘 나온다.