[flutter] AnimatedContainer의 속성과 사용 방법

08 Dec 2023

flutter

Flutter에서 UI 요소를 애니메이션화하는 방법 중 하나는 AnimatedContainer를 사용하는 것입니다. AnimatedContainer를 사용하면 컨테이너의 속성이 변경될 때 부드러운 애니메이션 효과를 적용할 수 있습니다. 이 글에서는 AnimatedContainer의 기본 속성과 사용 방법을 알아보겠습니다.

1. 기본 속성

AnimatedContainer는 일반적인 Container 위젯과 유사하지만, 속성이 변경될 때 자동으로 애니메이션을 적용합니다. 몇 가지 주요 속성은 다음과 같습니다:

duration: 애니메이션의 지속 시간을 지정합니다.
curve: 애니메이션의 속도 곡선을 설정합니다. 예를 들어, Curves.easeInOut은 시작과 끝 부분에서 느려지는 애니메이션을 만듭니다.
color: 컨테이너의 색상을 지정합니다.
width, height: 컨테이너의 너비와 높이를 지정합니다.
padding: 내부 여백을 지정합니다.

2. 사용 방법

AnimatedContainer를 사용하는 방법은 간단합니다. 먼저, 애니메이션을 적용하고자 하는 속성에 대한 상태 변수를 생성합니다. 그런 다음, 이 상태 변수를 AnimatedContainer의 해당 속성에 연결합니다. 상태가 변경될 때마다 AnimatedContainer는 지정된 지속 시간 동안 애니메이션을 적용합니다.

import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _toggleContainer();
      },
      child: Center(
        child: AnimatedContainer(
          duration: Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
          color: _isExpanded ? Colors.blue : Colors.green,
          width: _isExpanded ? 200.0 : 100.0,
          height: _isExpanded ? 200.0 : 100.0,
          padding: _isExpanded ? EdgeInsets.all(20.0) : EdgeInsets.all(10.0),
          child: Center(child: Text('Click me')),
        ),
      ),
    );
  }
}

위 예제에서는 AnimatedContainer의 색상, 너비, 높이 및 내부 여백을 애니메이션화했습니다. 상태가 토글될 때마다 애니메이션이 적용되는 것을 볼 수 있습니다.

AnimatedContainer를 사용하면 UI를 부드럽게 변화시키며 사용자 경험을 향상시킬 수 있습니다. 여기에 소개된 속성과 사용 방법을 응용하여 복잡한 UI 애니메이션을 쉽게 구현할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하시기 바랍니다.