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

11 Dec 2023

flutter

소개

이번에는 Flutter에서 애니메이션을 활용하여 사용자 인터페이스(UI)에서 위젯의 활성화 효과를 부드럽게 구현하는 방법에 대해 알아보겠습니다.

애니메이션 사용하기

Flutter에서 애니메이션을 구현하기 위해서는 Animation클래스와 AnimationController클래스를 활용합니다. 먼저 Animation클래스는 실제 애니메이션의 상태와 값을를 제공하고, AnimationController클래스는 애니메이션의 제어와 상태를 관리합니다.

다음은 간단한 예시 코드입니다.

import 'package:flutter/material.dart';

class WidgetAnimation extends StatefulWidget {
  @override
  _WidgetAnimationState createState() => _WidgetAnimationState();
}

class _WidgetAnimationState extends State<WidgetAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  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);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            _controller.forward();
          },
          child: AnimatedBuilder(
            animation: _animation,
            builder: (context, child) {
              return Container(
                width: 200 * _animation.value,
                height: 200 * _animation.value,
                color: Colors.blue,
              );
            },
          ),
        ),
      ),
    );
  }

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

위의 예시코드는 애니메이션 효과를 사용하여 터치 시 컨테이너의 크기를 부드럽게 변경하는 방법을 보여줍니다.

마치며

위의 예시를 통해, Flutter에서 애니메이션을 사용하여 위젯의 활성화 효과를 부드럽게 구현하는 방법에 대해 간단히 알아보았습니다. 애니메이션을 활용하면 사용자 경험을 향상시키는데 큰 도움이 될 것입니다.