앱을 디자인 하다보면 빠질 수 없는것중에 하나가 바로 에니메이션이다.
직관적이면서 심플한 에니메이션 효과는 앱 사용자에게 몰입감 있는 경험을 준다고 생각한다.
이번에는 이러한 효과가 들어간 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가 오버플로우 하지않게 방지해준다.
 |
|
좌측이 적용하지 않았을떄이며 오른쪽이 적용했을때이다.
'코딩 > Flutter' 카테고리의 다른 글
| [flutter] 38... AlertDialog에 Hero 적용시켜보기,, (PageRouteBuilder,Navigator) (0) | 2023.02.16 |
|---|---|
| [flutter] 37... Datetime 날짜 비교(전, 후) (compareTo, timestamp) (0) | 2023.02.10 |
| [flutter] 35... 디바이스 화면 회전 금지하기(SystemChrome, DeviceOrientation) (0) | 2023.02.03 |
| [flutter] 34... Get.snackbar 다중 알림 방지 (0) | 2023.02.02 |
| [flutter] 33... ListView 스크롤 제어하기(animateTo, horizontal date picker) (0) | 2023.01.31 |