[flutter] 레이아웃 전환 시 애니메이션 효과 활용하기

11 Dec 2023

flutter

앱을 보다 시각적으로 매력적으로 만들기 위해 애니메이션은 중요한 역할을 합니다. Flutter에서는 레이아웃 전환 시 애니메이션 효과를 쉽게 적용할 수 있는데요. 이번 포스트에서는 Flutter를 사용하여 레이아웃 전환 시 애니메이션 효과를 활용하는 방법을 살펴보겠습니다.

1. 애니메이션을 위한 패키지 설치

애니메이션 효과를 쉽게 추가하기 위해 animations 패키지를 설치합니다.

dependencies:
  animations: ^2.0.0

위와 같이 pubspec.yaml 파일에 패키지를 추가한 후 flutter pub get 명령어로 패키지를 설치합니다.

2. 애니메이션 적용하기

레이아웃 전환 시 애니메이션 효과를 적용하기 위해 다음과 같은 단계를 따릅니다:

2.1 시작과 끝 상태 정의

원하는 애니메이션 효과를 위해 시작과 끝 상태를 정의합니다.

class MyAnimatedLayout extends StatefulWidget {
  @override
  _MyAnimatedLayoutState createState() => _MyAnimatedLayoutState();
}

class _MyAnimatedLayoutState extends State<MyAnimatedLayout> {
  bool _isFirstState = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Layout'),
      ),
      body: GestureDetector(
        onTap: () {
          setState(() {
            _isFirstState = !_isFirstState;
          });
        },
        child: _isFirstState ? _buildFirstLayout() : _buildSecondLayout(),
      ),
    );
  }

  Widget _buildFirstLayout() {
    // 첫 번째 상태의 레이아웃 구현
  }

  Widget _buildSecondLayout() {
    // 두 번째 상태의 레이아웃 구현
  }
}

2.2 애니메이션 효과 적용

animations 패키지를 사용하여 시작과 끝 상태를 이어주는 애니메이션 효과를 적용합니다.

class _MyAnimatedLayoutState extends State<MyAnimatedLayout> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _controller.reset();
        }
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Layout'),
      ),
      body: GestureDetector(
        onTap: () {
          _isFirstState ? _controller.forward() : _controller.reverse();
          setState(() {
            _isFirstState = !_isFirstState;
          });
        },
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.scale(
              scale: _animation.value,
              child: _isFirstState ? _buildFirstLayout() : _buildSecondLayout(),
            );
          },
        ),
      ),
    );
  }

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

위의 예제 코드에서는 animations 패키지를 사용하여 AnimationController를 생성하고, Tween을 이용하여 시작과 끝 상태를 정의한 후, AnimatedBuilder를 통해 애니메이션을 적용하고 있습니다.

결론

Flutter를 사용하여 앱의 레이아웃 전환 시 애니메이션 효과를 적용하는 방법을 알아보았습니다. animations 패키지를 사용하면 간단하게 다양한 애니메이션 효과를 구현할 수 있으니, 여러 가지 애니메이션 효과를 실험해보면서 앱을 보다 흥미롭게 만들어보세요.