[flutter] 36... AnimatedContainer 사용법 (ClipRect, Wrap)

앱을 디자인 하다보면 빠질 수 없는것중에 하나가 바로 에니메이션이다.

직관적이면서 심플한 에니메이션 효과는 앱 사용자에게 몰입감 있는 경험을 준다고 생각한다.

 

이번에는 이러한 효과가 들어간 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가 오버플로우 하지않게 방지해준다.

좌측이 적용하지 않았을떄이며 오른쪽이 적용했을때이다.