[flutter] 플러터(flutter)에서의 애니메이션 구현 방법

플러터(flutter)는 Google에서 개발한 크로스 플랫폼 프레임워크로, 앱 개발에 사용되는 많은 기능을 제공합니다. 그 중에서도 애니메이션은 사용자에게 더욱 다이나믹하고 생동감 있는 경험을 제공하기 위해 매우 중요합니다. 이번 포스트에서는 플러터에서 애니메이션을 구현하는 방법에 대해서 알아보겠습니다.

1. AnimatedContainer 사용하기

플러터에서 제공하는 AnimatedContainer 위젯을 사용하면 애니메이션을 쉽게 구현할 수 있습니다. AnimatedContainer는 특정 시간 동안 속성을 애니메이션화하는 컨테이너입니다. 속성을 변경하면 자동으로 애니메이션 효과가 표시됩니다.

class MyAnimatedContainer extends StatefulWidget {
  @override
  _MyAnimatedContainerState createState() => _MyAnimatedContainerState();
}

class _MyAnimatedContainerState extends State<MyAnimatedContainer> {
  double _width = 100.0;
  double _height = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _width = 200.0;
              _height = 200.0;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _width,
            height: _height,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위 코드는 _width_height 변수를 사용하여 애니메이션할 AnimatedContainer 위젯을 생성합니다. GestureDetector를 통해 사용자가 화면을 탭할 때마다 _width_height가 변경되어 애니메이션이 표시됩니다.

2. AnimatedBuilder 사용하기

AnimatedBuilder는 위젯 트리 내에서 특정 애니메이션을 빌드할 때 사용됩니다. AnimatedContainer와 달리 모든 속성을 애니메이션화할 수 있습니다.

class MyAnimatedBuilder extends StatefulWidget {
  @override
  _MyAnimatedBuilderState createState() => _MyAnimatedBuilderState();
}

class _MyAnimatedBuilderState extends State<MyAnimatedBuilder>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget child) {
            return Opacity(
              opacity: _animation.value,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
              ),
            );
          },
        ),
      ),
    );
  }
}

위 코드는 AnimationControllerAnimation을 사용하여 애니메이션을 구현하는 예시입니다. _animation을 사용하여 Opacity 위젯을 애니메이션화하여 투명도가 0에서 1까지 변하도록 됩니다.

결론

이렇게 플러터(flutter)에서 애니메이션을 구현하는 방법에 대해서 알아보았습니다. AnimatedContainerAnimatedBuilder를 사용하여 다양한 애니메이션 효과를 구현할 수 있습니다. 플러터의 애니메이션 기능을 잘 활용하여 다이나믹하고 생동감 있는 앱을 개발해보세요!