Flutter[플러터] / AnimatedIcon 을 사용하여 전환되는 아이콘 제작하기 (자동, 애니메이션, 컨트롤러, AnimationController) AnimatedIcon (Flutter Widget of the Week)

AnimatedIcon class

애니메이션 진행 상황에 따라 애니메이션 아이콘을 표시합니다.

사용 가능한 아이콘은 AnimatedIcons 에 지정되어 있습니다.

https://youtu.be/pJcbh8pbvJs

공식 문서 코드

 

 

---

웹사이트에서 헤더의 목록 아이콘 같은 것이 회전하면서 캔슬 아이콘으로 바뀌는 것을 경험해본 적 있는가? 이 AnimatedIcon 그 동작을 자체 제공하여 아주 쉽게 만들어주는 위젯이다. (오오 플러터 오오 플러터) 한번 알아보자.

하위 속성

속성명	타입	기본값	설명
icon	AnimatedIconData	–	애니메이션에 사용할 아이콘 데이터
progress	Animation<double>	–	애니메이션의 진행 정도 (AnimationController 사용)
color	Color?	IconTheme.color	아이콘 색상
size	double?	IconTheme.size	아이콘의 크기
semanticLabel	String?	null	스크린리더 등 보조 기술에서 사용하는 설명 텍스트
textDirection	TextDirection?	Directionality.of(context)	RTL 지원 여부, 방향에 따라 아이콘이 반전될 수 있음

 

일단 먼저 가장 핵심은 당연하게도 icon 속성이 되겠다. AnimatedIconData 를 타입으로 가지는 아이콘을 불러올 수 있는데 생각보다 아이콘 수가 한정적이다. (근데 사실 여기에 있는 것도 다 못 쓸 것 같다.)

사용하는 방법은 간단하다.

icon: AnimatedIcons.add_event,

AnimatedIcons 에서 자신이 원하는 아이콘을 가져와서 사용하면 된다.

그 후 이제 사용할 아이콘을 정했으니 당연하게도 애니메이션을 넣어야 할 것이다. 넣는 방법은 간단한데 AnimationContoller 를 그냥 사용해 주면 된다.

class _TestState extends State<Test> with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

 

일단 당연하게도 StatefulWidget 으로 만들어야 할 것이고 SingleTickerProviderStateMixin 같은걸 믹스인 해야 할 것이다.

그런 다음 controller 에는 자신이 넣고 싶은 애니메이션 집어넣어주면 되겠고 controller.dispose 는 항상 넣어주는 습관을 들이자.

공식 예제에서는 그냥 바로 노빠꾸 repeat 을 박아버렸다. 근데 보통은 저렇게 사용 안 하니까 클릭하면 애니메이션 되는 보통의 동작 방식으로 구현했다.

bool isForward = false;

void _toggleAnimation() {
  setState(() {
    if (isForward) {
      controller.reverse();
    } else {
      controller.forward();
    }
    isForward = !isForward;
  });
}

 

이렇게 토글 동작까지 만들었다. 그럼 이제 빌드 코드에서는 그냥 딸깍 해주면 되겠다.

GestureDetector(
  onTap: () => _toggleAnimation(),
  child: AnimatedIcon(
    icon: AnimatedIcons.add_event,
    progress: controller,
  ),
),

 

GestureDetector 사용해서 클릭감지하게 해 주고 탭 시 토글 동작하게 만들어줬다. 

이제 AnimatedIcon 에서는 add_event 아이콘을 사용해줬고 pregress 에는 아까 만들어 놓은 AnimatedController 를 먹여주면 아주 쉽게 끝난다.

 

 

이렇게 AnimatedIcon 에 대해서 간단하게 알아보았다. 솔직히 메뉴 클릭할 때 애니메이션 없으면 좀 심심해서 난 많이 넣는 편인데 이런 위젯이 있는 줄 알았으면 진작에 좀 쓸걸 그랬다. 지금까지 직접 제작하고 있었다. 암튼 도움이 되었길 바라며 마치겠다.