Segment 버튼에 애니메이션 적용하기

🧐 Before

세그먼트 버튼을 구현하던중 탭했을때 변화가 너무 단조롭다고 생각했다. 예쁘게 꾸미고싶어 세그먼트 버튼에 애니메이션을 넣어보았다.

---

☺️ After

 

애니메이션 1

 

세그먼트 애니메이션은 AnimatedContainer을 통해 구현했다. AnimatedContainer는 색상, 크기, 모양, 위치 등 속성이 변경될 때 애니메이션 효과를 자동으로 적용해준다. 별도의 컨트롤러 없이 duration과 curve만 설정하면 된다는게 큰 장점이다. 위 애니메이션은 크게 버튼 배경색 변화와 텍스트색 변화로 구현할 수 있다. 

배경색 변화

• duration: 애니메이션의 지속 시간(300ms). 버튼 클릭 시 색상이 천천히 변경
• curve: 애니메이션 속도 곡선. Curves.easeInOut은 부드럽게 시작하고 일반적인 속도로 종료.
• 배경색상 전환: isSelected에 따라 AppColors.primary.blue 또는 AppColors.base.deep로 변경

AnimatedDefaultTextStyle은 텍스트의 스타일(예: 색상, 굵기)이 변경될 때 애니메이션 효과를 제공한다. Animation Container와 마찬가지로 duration과 curve만 설정하면 된다.

 

텍스트색 변화

• 텍스트 색상 변경: 선택된 버튼에서는 AppColors.base.white로 변경.
• 텍스트 굵기 변경: 선택된 버튼에서는 FontWeight.bold로 강조.

 

액션주기

selectedIndex를 통해 현재 선택된 버튼의 인덱스를 관리한다. 버튼을 클릭하면 setState로 selectedIndex를 업데이트하고, 이를 통해 애니메이션이 시작된다. AnimatedContainer와 AnimatedDefaultTextStyle은 상태값(isSelected)에 따라 애니메이션이 트리거 된다.

 

전체코드 링크 https://gist.github.com/suojae/0fbd7f17467f9560a737e6b5ecbc49b4

 

 

 

애니메이션 2

 

두번째 애니메이션은 AnimatedPositioned와 Stack을 활용해 버튼 선택 시 부드럽게 이동하는 슬라이딩 애니메이션을 적용해보았다. 슬라이딩 애니메이션은 첫번째와 달리 버튼 배경에만 애니메이션을 주고 텍스트색에는 애니메이션을 안주고 색변화만 주었다. 이를 위해 먼저 두 레이어로 분리해서 애니메이션을 적용했다.

 

 

Stack 위젯을 사용해 버튼 배경과 텍스트 레이어 분리

배경색은 단순히 색변화가 아닌 위치가 바뀌어야했기때문에 Stack 위젯을 사용해 버튼 배경과 텍스트를 분리된 레이어로 구성후 애니메이션을 적용해주었다.

 

배경색 변화

 

버튼의 개수에 따라 배경의 크기와 위치를 동적으로 설정하기 위해 LayoutBuilder를 활용했다. constraints.maxWidth로 전체 너비를 가져오고 버튼 개수로 나누어 버튼 하나의 너비(buttonWidth)를 구한 후  선택된 인덱스 * buttonWidth 만큼 왼쪽 위치를 정해주어 파란 박스 데코레이션을 채워주었다. 이때 위치변화에 따른 애니메이션을 주어야했어서 위치에 따른 애니메이션을 자동으로 주는 AnimatedPositioned 위젯을 통해 구현했다.

 

텍스트색 변화

텍스트는 애니메이션 없이 GestureDetector를 통해 탭할 때마다 setState()를 실행시켜 단순 색변화만 주었다.

 

애니메이션02 전체코드: https://gist.github.com/suojae/554c72bb7d2a484df5e7ce0730777333

 

 

이렇게 함으로써 선택된 버튼으로 배경이 부드럽게 슬라이딩했고 선택된 텍스트는 하이라이트 색상과 굵은 텍스트로 표시하여 예쁜 세그먼트를 만들 수 있었다. 코딩면에서는 2번이 좀더 작업이 들어갔지만 막상 비교해보니 결과적으로는 1번이 더 예쁜 것 같다🥹