AnimatedSwitcher가 동작하지 않을 때 해결방법

https://stackoverflow.com/questions/57548253/animatedswitcher-not-working-as-intended-widget-changing-but-no-animation

AnimatedSwitcher not working as intended? Widget changing but no animation

1. 요약

 

AnimatedSwitcher의 child의 위젯이 변경전과 변경후가 같은 형태이면 AnimatedSwitcher가 동작하지 않는다.

AnimatedSwitcher가 위젯이 바뀌엇는지 구분을 못하기 때문인데, 이럴때 key값을 주면 해결이 된다

 

 

 

2. 문제상황

다음과 같은 코드는 애니메이션이 동작하지 않는다

AnimatedSwitcher(
    duration: const Duration(milliseconds: 1000),
    child: (_selectedIndex)
        ? Container(
            width: 100,
            height: 100,
            color: Colors.red,
          )
        : Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
  );

 

하지만 아래와 같이 키값을 주게되면 애니메이션이 동작한다

 

AnimatedSwitcher(
    duration: const Duration(milliseconds: 1000),
    child: (_selectedIndex)
        ? Container(
            key: ValueKey<int>(_selectedIndex),
            width: 100,
            height: 100,
            color: Colors.red,
          )
        : Container(
            key: ValueKey<int>(_selectedIndex),
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
  );

 

 

3. 주의사항

키값을 줄 때 Animation의 child 위젯에 key값을 주어야 한다. child안에 있는 child 위젯이 키값을 주면 구분을 못함