컨테이너의 속성을 애니메이션하는 방법

flutter 공식 문서: Animate the properties of a container 번역

Flutter에서 AnimatedContainer 위젯을 사용하여 크기, 배경색, 테두리 반경 등의 속성을 애니메이션하는 방법을 소개합니다. 사용자가 버튼을 탭할 때 이러한 속성을 애니메이션하여 변화시키는 예제를 통해 설명합니다.

1. StatefulWidget 생성 및 기본 속성 정의

먼저, StatefulWidget과 상태 관리 클래스를 생성합니다. 이 클래스 내에서 시간이 지남에 따라 변경될 속성들을 정의합니다. 이 예제에서는 너비(_width), 높이(_height), 색상(_color), 테두리 반경(_borderRadius) 등의 속성을 다룹니다. 또한, 각 속성의 기본값도 설정합니다.

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({super.key});

  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    // 다음 단계에서 구현
  }
}

2. 속성을 사용하여 AnimatedContainer 구성

다음으로, 앞서 정의한 속성들을 사용하여 AnimatedContainer를 구성합니다. 애니메이션이 실행될 기간(duration)도 정의합니다.

AnimatedContainer(
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
  duration: const Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
)

3. 새로운 속성으로 애니메이션 시작

마지막으로, 사용자가 버튼을 탭할 때 새로운 속성으로 AnimatedContainer를 다시 빌드하여 애니메이션을 시작합니다. setState() 메서드를 사용하여 위젯을 새로운 값으로 다시 빌드합니다.

FloatingActionButton(
  onPressed: () {
    setState(() {
      final random = Random();

      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();

      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );

      _borderRadius =
          BorderRadius.circular(random.nextInt(100).toDouble());
    });
  },
  child: const Icon(Icons.play_arrow),
)

이 방법을 통해 Flutter에서 간단한 애니메이션을 구현할 수 있습니다. 사용자 인터랙션에 반응하는 동적인 UI를 만드는 데 AnimatedContainer가 얼마나 유용한지 알 수 있습니다.

4. 코드 예시

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(const AnimatedContainerApp());

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({super.key});

  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // Define the various properties with default values. Update these properties
  // when the user taps a FloatingActionButton.
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child: AnimatedContainer(
            // Use the properties stored in the State class.
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            // Define how long the animation should take.
            duration: const Duration(seconds: 1),
            // Provide an optional curve to make the animation feel smoother.
            curve: Curves.fastOutSlowIn,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          // When the user taps the button
          onPressed: () {
            // Use setState to rebuild the widget with new values.
            setState(() {
              // Create a random number generator.
              final random = Random();

              // Generate a random width and height.
              _width = random.nextInt(300).toDouble();
              _height = random.nextInt(300).toDouble();

              // Generate a random color.
              _color = Color.fromRGBO(
                random.nextInt(256),
                random.nextInt(256),
                random.nextInt(256),
                1,
              );

              // Generate a random border radius.
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
          child: const Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}