본문 바로가기
Flutter

Flutter AnimatedSwitcher로 부드러운 화면 전환 애니메이션 구현해보기

by 김무스비 2024. 10. 23.
728x90
반응형

Flutter의 AnimatedSwitcher는 매우 유용한 위젯으로, UI에서 하나의 위젯을 다른 위젯으로 전환할 때 부드러운 애니메이션을 적용할 수 있게 해줍니다. 이 글에서는 AnimatedSwitcher의 개념과 사용법, 그리고 실전 예제를 통해 이를 앱 개발에서 효과적으로 사용하는 방법을 알아보겠습니다.

switcher image

1. AnimatedSwitcher란 무엇인가?

AnimatedSwitcher는 위젯 간 전환 시 애니메이션을 적용하는 Flutter 위젯입니다. 이 위젯을 사용하면, 화면에 표시된 기존 위젯을 새로운 위젯으로 교체할 때 자동으로 전환 애니메이션이 실행됩니다.

앱에서 위젯의 상태가 변경되면 즉각적으로 새로운 UI 요소가 나타나는 것이 아니라, 자연스럽게 전환되어 사용자의 시각적 경험이 더욱 매끄럽게 유지됩니다. 예를 들어, 텍스트, 이미지 또는 버튼의 상태가 바뀔 때, 단순한 변화 대신 애니메이션을 통해 더 동적인 UI를 만들 수 있습니다.

2. AnimatedSwitcher의 주요 속성

AnimatedSwitcher는 다양한 애니메이션 효과를 제공하며, 주로 아래와 같은 속성들을 사용해 제어합니다.

  1. child: 교체될 위젯입니다. AnimatedSwitcher는 이 child 속성에 따라 화면에 표시되는 위젯을 애니메이션으로 교체합니다.
  2. duration: 애니메이션이 실행되는 시간을 나타냅니다. 이 속성을 통해 전환 애니메이션이 얼마나 빠르거나 느리게 실행될지를 설정할 수 있습니다. 기본적으로는 300ms 정도가 많이 사용됩니다.
  3. transitionBuilder: 위젯 전환 시 어떤 애니메이션을 적용할지를 설정합니다. Flutter는 기본적으로 FadeTransition을 제공하지만, 이 속성을 통해 개발자가 원하는 다른 애니메이션도 쉽게 적용할 수 있습니다. 예를 들어, 슬라이딩 애니메이션이나 회전 애니메이션 등 다양한 효과를 구현할 수 있습니다.
  4. layoutBuilder: 새 위젯과 이전 위젯이 동시에 화면에 있을 때 어떻게 배치할지를 결정합니다. 기본적으로 AnimatedSwitcher는 새로운 위젯이 화면에 나타나기 전에 기존 위젯을 제거합니다.

3. AnimatedSwitcher 사용 예제

AnimatedSwitcher의 실제 사용 예시를 통해 이를 어떻게 적용할 수 있는지 살펴보겠습니다. 아래 코드는 숫자가 증가할 때마다 애니메이션을 적용하여 새로운 숫자가 부드럽게 화면에 나타나는 예시입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedSwitcher Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedSwitcher(
                duration: Duration(milliseconds: 500),
                transitionBuilder: (Widget child, Animation<double> animation) {
                  return ScaleTransition(child: child, scale: animation);
                },
                child: Text(
                  '$_count',
                  key: ValueKey<int>(_count),
                  style: TextStyle(fontSize: 40),
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _count += 1;
                  });
                },
                child: Text('숫자 증가'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서 중요한 부분은 AnimatedSwitcher 위젯이 Text 위젯을 애니메이션으로 교체한다는 점입니다. 버튼을 누를 때마다 숫자가 증가하면서 부드러운 애니메이션이 적용됩니다. transitionBuilder 속성을 사용하여 숫자가 커질 때마다 크기가 커지는 ScaleTransition 애니메이션이 적용됩니다.

핵심 포인트:

  • duration: 애니메이션의 속도를 설정하여 500ms로 전환됩니다.
  • transitionBuilder: 숫자가 변할 때 확대되는 애니메이션(ScaleTransition)을 적용합니다.
  • key: 변경되는 위젯의 상태를 구분하기 위해 ValueKey를 사용하여 각 숫자를 고유하게 만듭니다.

4. AnimatedSwitcher의 활용 시나리오

AnimatedSwitcher는 다양한 앱 개발 시나리오에서 활용될 수 있습니다. 특히, 상태 변화가 자주 발생하는 UI에서 애니메이션을 적용하면 사용자 경험을 더욱 풍부하게 만들 수 있습니다. 다음은 AnimatedSwitcher가 유용하게 사용될 수 있는 몇 가지 상황입니다.

1) 상태 변화에 따른 UI 업데이트

사용자의 입력에 따라 UI가 바뀌는 상황에서 AnimatedSwitcher는 매우 유용합니다. 예를 들어, 좋아요 버튼을 클릭했을 때 아이콘이 바뀌는 애니메이션, 점수가 업데이트되는 화면에서 부드러운 숫자 변경, 텍스트나 버튼의 상태가 변화하는 경우에 사용될 수 있습니다.

2) 페이지 전환

화면의 일부가 교체되는 상황에서도 AnimatedSwitcher를 사용할 수 있습니다. 예를 들어, 탭 간 전환, 이미지 슬라이더 등에서 위젯 간의 전환을 부드럽게 처리하는 데 유용합니다.

3) 리스트 항목의 추가/삭제

목록에서 아이템이 추가되거나 삭제될 때, AnimatedSwitcher를 활용하면 요소가 사라지거나 나타나는 것을 부드럽게 처리할 수 있습니다. 이를 통해 목록이 업데이트될 때 발생하는 불연속적인 화면 변화를 최소화할 수 있습니다.

5. AnimatedSwitcher로 다양한 애니메이션 만들기

AnimatedSwitcher는 기본적으로 FadeTransition을 사용하지만, transitionBuilder 속성을 통해 다양한 애니메이션 효과를 손쉽게 커스터마이징할 수 있습니다. 아래는 몇 가지 애니메이션을 적용하는 예시입니다.

1) SlideTransition

transitionBuilder: (Widget child, Animation<double> animation) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: Offset(1.0, 0.0),
      end: Offset(0.0, 0.0),
    ).animate(animation),
    child: child,
  );
},

위 코드는 새로운 위젯이 화면 오른쪽에서 왼쪽으로 슬라이딩되면서 나타나도록 하는 SlideTransition애니메이션을 적용하는 예시입니다.

2) RotationTransition

transitionBuilder: (Widget child, Animation<double> animation) {
  return RotationTransition(
    turns: animation,
    child: child,
  );
},

이 코드는 위젯이 회전하면서 화면에 나타나도록 하는RotationTransition애니메이션을 적용합니다.

3) ScaleTransition

transitionBuilder: (Widget child, Animation<double> animation) {
  return ScaleTransition(
    scale: animation,
    child: child,
  );
},

새로운 위젯이 확대되면서 나타나는 ScaleTransition을 적용하여 크기 변화를 애니메이션으로 구현합니다.

6. AnimatedSwitcher와 다른 애니메이션 위젯 비교

Flutter에서 제공하는 다양한 애니메이션 위젯들과 AnimatedSwitcher를 비교해 보면, AnimatedSwitcher는 위젯 전환에 특화되어 있다는 점에서 독특합니다. 예를 들어:

  • AnimatedContainer는 컨테이너의 속성(크기, 색상 등)이 변경될 때 애니메이션을 적용합니다.
  • AnimatedOpacity는 투명도 변화를 애니메이션으로 처리합니다.

반면, AnimatedSwitcher는 위젯 자체가 교체되는 상황에서 전환 애니메이션을 제공합니다. 이를 통해 상태 변화에 따른 전환 효과를 간단하게 구현할 수 있습니다.

7. 결론

AnimatedSwitcher는 위젯의 상태 변화에 따라 부드러운 전환 애니메이션을 쉽게 적용할 수 있는 Flutter 위젯입니다. 단순한 상태 변화에 동적이고 시각적으로 매력적인 효과를 추가함으로써 사용자 경험을 크게 개선할 수 있습니다. 다양한 애니메이션 옵션을 활용하여 더 흥미롭고 직관적인 UI를 설계해 보세요. AnimatedSwitcher를 통해 Flutter 앱에 부드러운 전환 효과를 더하고, 사용자가 보다 자연스럽게 앱과 상호작용할 수 있는 환경을 제공할 수 있습니다.

728x90
반응형

'Flutter' 카테고리의 다른 글

Flutter CustomScrollView로 복잡한 스크롤 레이아웃을 쉽게 구현하기  (0) 2024.10.24
IndexedStack 위젯으로 효율적인 화면 전환하기  (0) 2024.10.23
Flutter FractionallySizedBox 위젯으로 비율 기반 레이아웃 쉽게 구현하기  (1) 2024.10.22
Flutter RichText 위젯 가이드: 스타일링과 활용법  (0) 2024.10.22
Flutter InkWell 위젯으로 터치 이벤트 구현해보기  (0) 2024.10.21

관련글

티스토리툴바