Flutter Animation icon

 

위와 같이 아이콘에 애니메이션을 주고 싶습니다. 

Flutter에서는 아이콘에 애니메이션이 쉽게 적용될 수 있도록 AnimatedIcon 이라는 위젯을 제공 합니다. 
아래 링크에서 확인 가능합니다. 
https://www.youtube.com/watch?v=pJcbh8pbvJs 

 

위 방식으로 진행할 때, 커스텀이 쉽지 않습니다. 
아래의 IconData가 제공되는 전부라서 커스텀 하기가 굉장히 힘듭니다. 

 

따라서 저는 다른 라이브러리를 사용합니다. 
https://pub.dev/packages/animate_icons

animate_icons | Flutter Package

 

animate_icons 는 굉장히 커스텀도 쉽게 그리고 만들기도 쉽게 해줍니다. 

AnimateIcons(
    startIcon: Icons.add_circle,
    endIcon: Icons.add_circle_outline,
    size: 100.0,
    controller: controller,
    // add this tooltip for the start icon
    startTooltip: 'Icons.add_circle',
    // add this tooltip for the end icon
    endTooltip: 'Icons.add_circle_outline',
    size: 60.0,
    onStartIconPress: () {
        print("Clicked on Add Icon");
        return true;
    },
    onEndIconPress: () {
        print("Clicked on Close Icon");
        return true;
    },
    duration: Duration(milliseconds: 500),
    startIconColor: Colors.deepPurple,
    endIconColor: Colors.deepOrange,
    clockwise: false,
),

간단하게는 Flutter에서 제공하는 AnimatedIcon, 커스텀이 필요하다면 animate_icons를 추천합니다.