코딩/Flutter
[flutter] 36... AnimatedContainer 사용법 (ClipRect, Wrap)
레이첼 맥
2023. 2. 8. 17:25
앱을 디자인 하다보면 빠질 수 없는것중에 하나가 바로 에니메이션이다.
직관적이면서 심플한 에니메이션 효과는 앱 사용자에게 몰입감 있는 경험을 준다고 생각한다.
이번에는 이러한 효과가 들어간 AnimatedContainer에 대해 알아보겠다.
AnimatedContainer(
duration: const Duration(milliseconds: 500),
width: bool ? 100 : 0,
height: bool ? 100 : 0,
curve: Curves.bounceIn,
child: const Text("test"),
),
기본적인 사용 예시이다.
duration - 에니메이션 효과의 가동 시간이다.
width, height - bool 의 값에 따라 100 -> 0 or 0 -> 100으로 사이즈가 변한다.
curve - 다양한 에니메이션 효과들을 볼 수 있다. 직접보고싶다면 오른쪽 깃헙 주소에 들어가면된다.
아래 코드는 내가 제작하고 있는 앱의 코드이다.
AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOutQuart,
height: taskcontroller.isAllday.value == false ? 110 : 0,
child: ClipRect(
child: Wrap(
children: [
Row(
children: [
Expanded(
child: Inputfield(
title: '시작',
hint: homecontroller.startTime.value,
widget: IconButton(
icon: Icon(
Icons.timer,
color: Mycolor().textwhite,
),
onPressed: () async {
},
),
),
),
const SizedBox(width: 20),
Expanded(
child: Inputfield(
title: '종료',
hint: homecontroller.endTime.value,
widget: IconButton(
icon: Icon(
Icons.timer,
color: Mycolor().textwhite,
),
onPressed: () async {
},
),
),
),
],
),
],
),
),
),
자식 위젯에 보면 ClipRect 와 Wrap으로 감싸준것을 볼 수 있는데.
이는 에니메이션 가동중 UI가 오버플로우 하지않게 방지해준다.
![]() |
![]() |
좌측이 적용하지 않았을떄이며 오른쪽이 적용했을때이다.