이번 포스트에서는 Flutter에서 AnimatedContainer의 투명도 속성을 이용하여 간단한 페이드 인과 페이드 아웃 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

AnimatedContainer란?

AnimatedContainer는 Flutter에서 애니메이션을 쉽게 적용할 수 있도록 해주는 위젯입니다. 크기와 색상, 투명도 등의 속성을 변경할 때 부드러운 애니메이션 효과를 자동으로 적용해줍니다.

AnimatedContainer의 사용 예시

다음은 단순한 텍스트가 표시되는 AnimatedContainer의 예시 코드입니다.

AnimatedContainer(
  duration: Duration(seconds: 1),
  color: _isVisible ? Colors.blue : Colors.transparent,
  child: Center(child: Text('Hello, Flutter!')),
)

위 코드에서 _isVisible 변수의 값에 따라 투명도가 적용되며, 색상이 변화함에 따라 부드러운 애니메이션이 적용됩니다.

페이드 인/아웃 애니메이션 구현하기

이제 페이드 인과 페이드 아웃 애니메이션을 구현해보겠습니다. 아래의 예시 코드는 특정 이벤트가 발생했을 때 _isVisible 값을 변경하여 페이드 인/아웃 애니메이션을 보여주는 간단한 예시입니다.

bool _isVisible = false;

void _toggleVisibility() {
  setState(() {
    _isVisible = !_isVisible;
  });
}

// ...

AnimatedContainer(
  duration: Duration(seconds: 1),
  curve: Curves.easeIn,
  color: _isVisible ? Colors.blue : Colors.transparent,
  child: Center(child: Text('Hello, Flutter!')),
),

RaisedButton(
  onPressed: () {
    _toggleVisibility();
  },
  child: Text(_isVisible ? 'Fade Out' : 'Fade In'),
)

위 코드에서 _isVisible 변수의 값에 따라 버튼 텍스트가 변경되며, 버튼을 클릭할 때마다 텍스트가 페이드 인과 페이드 아웃 애니메이션을 보여줍니다.

결론

AnimatedContainer의 투명도 속성을 이용하여 간단한 페이드 인/아웃 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 화면 전환이나 UI 효과를 구현하는 데 활용할 수 있습니다.