[flutter] SlideTransition을 이용한 화면 슬라이드 애니메이션 구현하기

08 Dec 2023

flutter

안녕하세요! Flutter에서 화면 전환 시 슬라이드 애니메이션을 구현할 수 있는 SlideTransition에 대해 알아보겠습니다.

SlideTransition이란?

SlideTransition은 Animation 및 Positioned 위젯을 사용하여 화면 이동 효과를 구현하는 데 사용됩니다. 시작 위치와 종료 위치를 지정하여 특정 축(X 또는 Y)을 따라 움직이는 애니메이션을 만들 수 있습니다.

SlideTransition 구현하기

아래는 SlideTransition을 사용하여 화면을 오른쪽에서 왼쪽으로 슬라이드하는 애니메이션을 구현하는 예제 코드입니다.

import 'package:flutter/material.dart';

class SlideTransitionDemo extends StatefulWidget {
  @override
  _SlideTransitionDemoState createState() => _SlideTransitionDemoState();
}

class _SlideTransitionDemoState extends State<SlideTransitionDemo> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetAnimation;

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

    _offsetAnimation = Tween<Offset>(
      begin: Offset(1.0, 0.0),
      end: Offset.zero,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.ease,
    ));
  }

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

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offsetAnimation,
      child: YourWidget(),
    );
  }
}

위 코드에서 SlideTransition 위젯은 _offsetAnimation을 이용하여 화면을 슬라이드하는 애니메이션을 구현합니다. 또한 AnimationController를 사용하여 애니메이션을 제어합니다.

마무리

Flutter에서 SlideTransition을 이용하여 화면 슬라이드 애니메이션을 쉽게 구현할 수 있습니다. 이를 활용하여 다양한 화면 전환 효과를 적용해보세요!

참고 자료: