[flutter] 애니메이션을 사용한 위젯 활성화 효과 구현 방법

11 Dec 2023

flutter

Flutter 앱에서 사용자 상호 작용에 반응하여 위젯을 활성화하는 기능을 구현하고 싶을 때가 있습니다. 이를 위해서는 애니메이션을 활용하여 부드럽고 시각적으로 매끄러운 효과를 구현할 수 있습니다.

1. 필요한 패키지 설치

먼저, flutter_animation_set 패키지를 사용하여 애니메이션을 효과적으로 구현할 수 있습니다. pubspec.yaml 파일에 해당 패키지를 추가한 후, flutter pub get 명령어로 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_animation_set: ^1.0.1

2. 애니메이션 효과 적용

아래는 애니메이션 패키지를 이용하여 위젯을 활성화하는 효과를 구현한 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter_animation_set/widget/animation_set.dart';

class ActivatableWidget extends StatefulWidget {
  @override
  _ActivatableWidgetState createState() => _ActivatableWidgetState();
}

class _ActivatableWidgetState extends State<ActivatableWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_controller.isCompleted) {
          _controller.reverse();
        } else {
          _controller.forward();
        }
      },
      child: AnimationSet(
        animationController: _controller,
        animations: [
          ScaleAnimation(begin: 1.0, end: 0.8, curve: Curves.ease),
          OpacityAnimation(begin: 1.0, end: 0.5, curve: Curves.ease),
        ],
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
          child: Center(
            child: Text(
              '활성화',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

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

위 코드에서는 AnimationSet 위젯을 사용하여 ScaleAnimation 및 OpacityAnimation을 적용하여 활성화 효과를 구현하였습니다.

이렇게 구현한 활성화 효과는 사용자와의 상호 작용에 부드럽게 반응하여 시각적으로 화면을 갱신할 수 있습니다.

결론

Flutter에서 애니메이션을 사용하여 위젯을 활성화하는 효과를 구현하는 방법을 살펴보았습니다. 이를 통해 사용자 경험을 향상시키고 앱의 시각적 품질을 향상시킬 수 있습니다.

더 많은 세부적인 내용은 flutter_animation_set 패키지의 문서를 참고하시면 도움이 될 것입니다.