[flutter] 애니메이션을 사용한 상태 변경 요소의 시각적 변화 표현 방법

11 Dec 2023

flutter

Flutter 앱에서 상태가 변경될 때 사용자에게 더 나은 시각적 경험을 제공하기 위해 애니메이션을 사용하는 것은 매우 중요합니다.

이 블로그 포스트에서는 Flutter에서 상태가 변경될 때 애니메이션을 사용하여 시각적 변화를 표현하는 방법에 대해 알아보겠습니다.

애니메이션 기본 구현

Flutter에서 애니메이션을 구현하는 가장 일반적인 방법은 AnimationController와 Tween을 사용하는 것입니다. AnimationController는 애니메이션의 지속 시간과 애니메이션을 제어하는 데 사용되며, Tween은 애니메이션의 시작 및 종료 값을 정의합니다.

다음은 빠르고 간단한 상태가 변경될 때 배경 색상이 애니메이션되는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyAnimatedWidget(),
        ),
      ),
    );
  }
}

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    _animation = ColorTween(begin: Colors.red, end: Colors.blue)
        .animate(_controller)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              _controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              _controller.forward();
            }
          });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Container(
          color: _animation.value,
          width: 200,
          height: 200,
        );
      },
    );
  }
}

위의 코드는 애니메이션 컨트롤러를 생성하고, 색상을 변경할 수 있는 트윈을 정의하며, 그에 따라 애니메이션을 구현합니다.

변화 요소에 애니메이션 적용하기

애니메이션을 적용하려는 요소 및 해당 요소의 상태가 변경될 때 적절한 애니메이션을 사용하는 것이 중요합니다.

예를 들어, 버튼을 누를 때마다 크기가 변경되는 요소를 가진 위젯이 있다고 가정해 봅시다.

다음은 이러한 요구 사항을 충족시키기 위한 Flutter 코드 일부입니다.

class AnimatedSizeWidget extends StatefulWidget {
  @override
  _AnimatedSizeWidgetState createState() => _AnimatedSizeWidgetState();
}

class _AnimatedSizeWidgetState extends State<AnimatedSizeWidget> {
  bool _isExpanded = false;

  void _toggleSize() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: _toggleSize,
        child: AnimatedContainer(
          duration: Duration(seconds: 1),
          curve: Curves.easeIn,
          width: _isExpanded ? 200 : 100,
          height: _isExpanded ? 200 : 100,
          color: Colors.blue,
          child: Center(
            child: Text(
              _isExpanded ? 'Expanded' : 'Collapsed',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 AnimatedContainer 위젯을 사용하여 사이즈가 변경될 때 애니메이션을 적용했습니다.

이러한 방식으로 Flutter에서는 다양한 상태가 변경될 때 애니메이션을 사용하여 시각적인 변화를 표현할 수 있습니다.