[flutter] 플러터(IndexedStack)에서 인덱스 변경시 이전 페이지의 애니메이션을 멈추는 방법은 무엇인가요?

07 Dec 2023

flutter

IndexedStack은 자식 위젯을 인덱스별로 겹치게 쌓을 수 있는 위젯입니다. 인덱스를 변경하여 다른 페이지를 표시할 수 있습니다. 하지만 기본적으로 IndexedStack은 현재 표시된 페이지 외의 모든 자식 위젯을 숨기고 애니메이션도 중지하지 않습니다.

만약 인덱스 변경시 이전 페이지의 애니메이션을 멈추고 싶다면, 애니메이션을 직접 멈춰주는 방법을 사용해야 합니다. 다음은 예시 코드입니다.

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _changePage() {
    // 이전 페이지의 애니메이션을 멈춤
    _animationController.stop();

    // 다음 페이지로 인덱스 변경
    // 예시) IndexedStack의 인덱스를 변경하는 로직
    setState(() {
      // 다음 페이지의 인덱스로 변경
    });
  }

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: 0, // 현재 페이지 인덱스
      children: [
        // 페이지 1
        SlideTransition(
          position: Tween<Offset>(
            begin: Offset.zero,
            end: Offset(1.0, 0.0),
          ).animate(_animationController),
          child: Container(
            // 페이지 1의 UI
          ),
        ),
        // 페이지 2
        SlideTransition(
          position: Tween<Offset>(
            begin: Offset(-1.0, 0.0),
            end: Offset.zero,
          ).animate(_animationController),
          child: Container(
            // 페이지 2의 UI
          ),
        ),
      ],
    );
  }
}

위 코드에서 _animationController를 사용하여 애니메이션을 제어합니다. _changePage 함수를 호출하여 인덱스를 변경할 때, 먼저 이전 페이지의 애니메이션을 멈춰준 후, 인덱스를 변경합니다.

위 코드는 예시일 뿐이며, 애니메이션 종류와 방식에 따라 더 세부적인 제어가 필요할 수 있습니다. 필요한 경우 AnimationController와 애니메이션 관련 튜토리얼 자료를 참고하시기 바랍니다.