[flutter] 플러터(IndexedStack)에서 인덱스 변경시 이전 페이지의 애니메이션 상태를 유지하는 방법은 무엇인가요?
  1. AnimatedSwitcher 위젯과 함께 사용하기: AnimatedSwitcher는 자식 위젯이 변경될 때 애니메이션 효과를 적용하는 위젯입니다. IndexedStack의 자식 위젯을 AnimatedSwitcher로 감싸면 인덱스 변경 시 애니메이션 효과를 유지할 수 있습니다.

    IndexedStack(
      index: _currentIndex,
      children: [
        AnimatedSwitcher(
          duration: Duration(milliseconds: 500),
          child: _widgetList[_currentIndex],
        ),
      ],
    )
    

    이 예제에서는 _currentIndex 변수를 사용하여 현재 인덱스에 해당하는 위젯을 보여줍니다. AnimatedSwitcher는 자식 위젯이 변경될 때 애니메이션 효과를 적용하기 때문에, 인덱스가 변경될 때마다 이전 페이지의 상태를 유지할 수 있습니다.

  2. 페이지 상태 저장하기: 각 페이지 위젯마다 상태를 저장하고, 인덱스 변경 시 해당 페이지의 상태를 복원하는 방법도 있습니다. 이를 위해서는 StatefulWidget을 사용하고, 각 페이지 위젯마다 GlobalKey를 생성하여 상태를 저장할 수 있습니다.

    GlobalKey<_PageState> _page1Key = GlobalKey<_PageState>();
    GlobalKey<_PageState> _page2Key = GlobalKey<_PageState>();
    
    IndexedStack(
      index: _currentIndex,
      children: [
        _Page1Widget(
          key: _page1Key,
        ),
        _Page2Widget(
          key: _page2Key,
        ),
      ],
    )
    

    위 예제에서는 _Page1Widget과 _Page2Widget 위젯마다 GlobalKey를 생성하여 각각의 상태를 저장합니다. 인덱스가 변경될 때마다 해당 페이지의 상태를 키를 통해 참조하여 복원할 수 있습니다.

이러한 방법을 사용하여 IndexedStack에서 인덱스 변경 시 이전 페이지의 애니메이션 상태를 유지할 수 있습니다. 선택한 방법에 따라 애니메이션 효과를 직접 지정하거나, 각 페이지의 상태를 저장 및 복원하는 방식으로 구현할 수 있습니다.

참고 자료: