[flutter] 플러터(IndexedStack)에서 인덱스 변경시 이전 페이지의 애니메이션 상태를 유지하는 방법은 무엇인가요?
-
AnimatedSwitcher 위젯과 함께 사용하기: AnimatedSwitcher는 자식 위젯이 변경될 때 애니메이션 효과를 적용하는 위젯입니다. IndexedStack의 자식 위젯을 AnimatedSwitcher로 감싸면 인덱스 변경 시 애니메이션 효과를 유지할 수 있습니다.
IndexedStack( index: _currentIndex, children: [ AnimatedSwitcher( duration: Duration(milliseconds: 500), child: _widgetList[_currentIndex], ), ], )
이 예제에서는 _currentIndex 변수를 사용하여 현재 인덱스에 해당하는 위젯을 보여줍니다. AnimatedSwitcher는 자식 위젯이 변경될 때 애니메이션 효과를 적용하기 때문에, 인덱스가 변경될 때마다 이전 페이지의 상태를 유지할 수 있습니다.
-
페이지 상태 저장하기: 각 페이지 위젯마다 상태를 저장하고, 인덱스 변경 시 해당 페이지의 상태를 복원하는 방법도 있습니다. 이를 위해서는 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에서 인덱스 변경 시 이전 페이지의 애니메이션 상태를 유지할 수 있습니다. 선택한 방법에 따라 애니메이션 효과를 직접 지정하거나, 각 페이지의 상태를 저장 및 복원하는 방식으로 구현할 수 있습니다.
참고 자료:
- Flutter AnimatedSwitcher: https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html
- Flutter GlobalKey: https://api.flutter.dev/flutter/widgets/GlobalKey-class.html