[flutter] 플러터에서의 애니메이션 및 트랜지션 효과 적용 방법

15 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다보면 화면 전환 시 애니메이션 효과를 적용하고 싶을 때가 있습니다. 이를 위해 플러터에서는 다양한 애니메이션 및 트랜지션 효과를 쉽게 적용할 수 있는 기능을 제공합니다. 이번 블로그에서는 플러터에서의 애니메이션과 트랜지션 효과를 적용하는 방법에 대해 알아보겠습니다.

1. 애니메이션 적용하기

플러터에서의 애니메이션은 Animation 및 AnimatedBuilder를 사용하여 쉽게 적용할 수 있습니다. 예를 들어, 다음은 애니메이션을 적용하여 요소의 위치를 변경하는 간단한 예제 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyAnimationWidget extends StatefulWidget {
  @override
  _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}

class _MyAnimationWidgetState extends State<MyAnimationWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _offsetAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    _offsetAnimation = Tween<Offset>(
      begin: Offset(0.0, 0.0),
      end: Offset(1.0, 1.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.ease,
    ));
  }

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

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

위 코드에서는 AnimationController를 사용하여 1초 동안 SlideTransition을 적용하는 간단한 애니메이션을 구현했습니다.

2. 트랜지션 효과 적용하기

화면 전환이나 특정 요소의 나타남/사라짐 시 트랜지션 효과를 적용할 수 있습니다. 예를 들어, 다음은 화면 전환 시 페이드 인/아웃 효과를 적용하는 예제 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyTransitionWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('화면 전환 효과'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('다음 화면으로'),
            onPressed: () {
              Navigator.push(
                context,
                PageRouteBuilder(
                  pageBuilder: (context, animation, secondaryAnimation) {
                    return FadeTransition(
                      opacity: animation,
                      child: NextScreen(),
                    );
                  },
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('다음 화면'),
      ),
      body: Center(
        child: Text('다음 화면'),
      ),
    );
  }
}

위 코드에서는 PageRouteBuilder 및 FadeTransition을 사용하여 화면 전환 시 페이드 인/아웃 효과를 적용한 예제를 보여주고 있습니다.

이처럼 플러터에서는 Animation 및 Transition을 활용하여 다양한 애니메이션 및 트랜지션 효과를 쉽게 적용할 수 있습니다. 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.