기능은 완벽하지만 뭔가 심심한 앱?
그럴 땐 간단한 애니메이션만 추가해도 앱의 완성도가 확 올라갑니다.
Flutter는 다양한 애니메이션 기능을 지원하며,
그중에서도 AnimatedContainer는 입문자가 가장 쉽게 활용할 수 있는 위젯입니다.
✨ AnimatedContainer란?
Container와 거의 같지만, 속성이 변경될 때 자동으로 부드럽게 애니메이션을 적용합니다.
- width, height, color, padding, margin, alignment 등이 바뀔 때
- setState()만 해도 자동으로 애니메이션 처리
🧪 실습 목표
✅ 버튼을 누르면 박스 크기와 색상이 부드럽게 바뀜
✅ 애니메이션 시간, 커브 설정 가능
✅ 앱의 주요 버튼이나 카드 요소에 자연스럽게 적용 가능
💻 기본 예제: 크기 & 색상 애니메이션
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(MaterialApp(home: AnimatedBoxDemo()));
class AnimatedBoxDemo extends StatefulWidget {
@override
_AnimatedBoxDemoState createState() => _AnimatedBoxDemoState();
}
class _AnimatedBoxDemoState extends State<AnimatedBoxDemo> {
double _width = 100;
double _height = 100;
Color _color = Colors.blue;
void _changeBox() {
setState(() {
_width = Random().nextDouble() * 200 + 100;
_height = Random().nextDouble() * 200 + 100;
_color = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AnimatedContainer 데모')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
width: _width,
height: _height,
color: _color,
child: Center(
child: Text(
'Box',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
🔍 주요 요소 설명
| duration | 애니메이션 실행 시간 |
| curve | 애니메이션 속도 변화 곡선 (easeIn, linear, 등) |
| width, height | 크기 변화에 반응 |
| color | 색상 변경 반영 |
| alignment, padding, margin 등도 가능 |
🎯 적용 아이디어
- 할 일 항목을 완료했을 때 색상/배경이 부드럽게 바뀌게
- 버튼 클릭 시 확장/축소 효과
- 로딩 중 카드나 박스를 부드럽게 나타나게 하기
예시:
AnimatedContainer(
duration: Duration(milliseconds: 300),
color: isDone ? Colors.grey : Colors.white,
child: Text(todo['title']),
);
🧠 마무리 요약
| AnimatedContainer | 속성 변경 시 자동으로 애니메이션 적용 |
| 사용법 | 기존 Container처럼 쓰고 setState()로 값만 변경 |
| 추천 적용처 | 버튼, 카드, 체크박스, 진행 표시 등 UX 요소 전반 |