플러터 (Flutter)에서는 Stack 위젯을 사용하여 화면 전환 효과를 구현할 수 있습니다. Stack 위젯은 여러 개의 위젯을 겹쳐서 표시할 수 있는 컨테이너입니다. 이를 활용하여 전환 효과를 구현하는 방법을 알아보겠습니다.

1. Stack 위젯 생성

먼저, Stack 위젯을 생성하고 화면에 표시될 위젯들을 정의합니다. 각 위젯은 Positioned 위젯을 사용하여 Stack 위젯 내에서 위치를 지정할 수 있습니다.

Stack(
  children: [
    // 첫 번째 화면
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      child: FirstScreen(),
    ),
    
    // 두 번째 화면
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      child: SecondScreen(),
    ),
  ],
)

위의 예시 코드에서는 첫 번째 화면과 두 번째 화면을 위치를 지정하여 Stack 위젯에 추가하였습니다. 첫 번째 화면이 위에 표시되고, 두 번째 화면이 아래에 숨겨져 있습니다.

2. 전환 효과 추가

이제 화면 전환 효과를 적용하기 위해 AnimationController와 Tween을 사용합니다. AnimationController는 애니메이션을 제어하고 Tween은 애니메이션의 시작과 끝 값을 설정합니다.

final AnimationController _controller = AnimationController(
  duration: const Duration(milliseconds: 500),
  vsync: this,
);

final Animation<double> _animation = Tween<double>(
  begin: 0,
  end: 1,
).animate(_controller);

위의 코드에서는 AnimationController의 duration 속성을 조정하여 전환 효과의 속도를 조절할 수 있습니다. begin과 end 속성을 이용하여 화면 전환의 시작과 끝 값을 설정합니다.

3. 전환 제어

애니메이션을 제어하고 화면 전환을 처리하기 위해 버튼이나 다른 이벤트를 사용해야 합니다. 아래의 코드는 RaisedButton 위젯을 터치할 때 애니메이션이 시작되고, 전환 효과가 적용되는 예시입니다.

RaisedButton(
  onPressed: () {
    _controller.forward(); // 애니메이션 시작
  },
  child: Text('전환'),
),

RaisedButton 위젯은 onPressed 이벤트가 발생하면 _controller의 forward() 메서드를 호출하여 애니메이션을 시작합니다.

4. 애니메이션 적용

마지막으로, Stack 위젯의 각 위젯에 애니메이션을 적용하여 전환 효과를 구현합니다. AnimatedBuilder 위젯을 사용하여 각 위젯의 위치를 애니메이션 값에 따라 변화시킵니다.

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Positioned(
      top: _animation.value * MediaQuery.of(context).size.height,
      child: child,
    );
  },
  child: FirstScreen(),
),

위의 예시 코드에서는 Positioned 위젯의 top 속성에 _animation의 값에 따라 위치를 조정하여 애니메이션 효과를 구현합니다. 화면이 위로 슬라이드 되는 효과를 가진 전환 효과가 적용됩니다.

결론

플러터에서 화면 전환 효과를 구현하기 위해 Stack 위젯을 사용할 수 있습니다. AnimationController와 Tween, AnimatedBuilder를 활용하여 전환 효과를 세부적으로 제어할 수 있습니다. 위의 방법을 참고하여 다양한 화면 전환 효과를 구현해 보세요.

참고문서:

• Stack class - widgets library
• AnimationController class - animation library