[Flutter] Animated Container 를 이용해 앱스토어 위젯 인터랙션 만들기

앱 개발중 버튼을 구현하다 인터랙션이 있으면 좋을 것 같아, 전에 보고 맘에 들었던 앱스토어의 위젯처럼 만들기로 했습니다.

위처럼 위젯을 눌렀을 때 위젯이 조금 작아지고 손을 떼면 다시 커지는 반응형 위젯입니다. 확실히 아무런 동작이 없을 때보다 유저의 사용경험이 확실히 올라갈만한 포인트라고 생각합니다.

AnimatedContainer?

애니메이션같은 효과를 줄 수 있는 컨테이너 위젯입니다. 컨테이너가 가지고 있는 속성들에 변수값을 넣고, 해당 변수의 값이 변화함에따라 미리 정해둔 애니메이션 효과와 Duration에 따라 모양이나 색등이 변화합니다.

어떻게 만들지 생각중

처음엔 width 와 height를 변수로 정해두고 만드려고 시도했었는데, 버튼에 고정 width 값을 넣는부분도 애매하고, 클릭할 때 가운데로 모이는게 아니라 그냥 작아져서 방식을 바꾸기로 했다.

padding 이용

padding 또한 컨테이너의 속성중 하나인데, 기존에 구현된 버튼은 그대로 두고 부모위젯으로 AnimatedContainer로 감싸서 padding에만 변수를 두고 구현하기로 했다. 쉽게 말해 구현된 버튼위로 패딩값을 조절하면 내가 원하는 모양대로 나올거 같았다.

구현 코드

AnimatedContainer(
              curve: Curves.easeIn,
              duration: const Duration(milliseconds: 100),
              padding: EdgeInsets.symmetric(
                  horizontal: horizontalPadding, vertical: verticalPadding),
              child: GestureDetector(
                onTapDown: (details) {
                  setState(() {
                    horizontalPadding = 30.w;
                    verticalPadding = 6.w;
                  });
                },
                onTapUp: (details) {
                  setState(() {
                    horizontalPadding = 24.w;
                    verticalPadding = 0.w;
                  });
                },
                onTapCancel: () {
                  setState(() {
                    horizontalPadding = 24.w;
                    verticalPadding = 0.w;
                  });
                },
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 14.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.w),
                    color: mainColor,
                    boxShadow: [
                      mainShadow,
                    ],
                  ),
                  child: Center(
                    child: Text(
                      '만들러 가기',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18.sp,
                      ),
                    ),
                  ),
                ),
              ),
            ),

구현 결과

개인적으로 버튼 인터랙션중에 가장 맘에 드네요