[flutter] 앱의 아이콘에 애니메이션을 적용해 사용자의 시선을 끌어주는 방법

22 Dec 2023

flutter

앱의 아이콘에 애니메이션을 추가하는 것은 사용자의 시각적인 경험을 향상시키고 앱의 인상을 깊게 남기는 데에 도움이 될 수 있습니다. Flutter를 사용하여 앱 아이콘에 애니메이션을 추가하는 방법에 대해 알아보겠습니다.

1. 앱 아이콘 이미지 준비

애니메이션을 적용할 아이콘 이미지를 준비합니다. 이미지는 Image 위젯을 사용하여 사용자에게 표시될 것이므로 .png나 .jpg 형식의 이미지를 사용합니다.

Image.asset('assets/app_icon.png')

2. 애니메이션 효과 추가

Flutter의 Animation 및 AnimatedBuilder 클래스를 사용하여 앱 아이콘에 애니메이션 효과를 추가합니다. 예를 들어, 아이콘을 회전시키거나 크기를 조절하는 등의 애니메이션을 적용할 수 있습니다.

class AnimatedAppIcon extends StatefulWidget {
  @override
  _AnimatedAppIconState createState() => _AnimatedAppIconState();
}

class _AnimatedAppIconState extends State<AnimatedAppIcon> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween(begin: 0.0, end: 2 * Math.pi).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    _controller.repeat(); // 애니메이션을 반복합니다.
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.rotate(
          angle: _animation.value,
          child: Image.asset('assets/app_icon.png'),
        );
      },
    );
  }
}

3. 앱 아이콘에 애니메이션 적용

이제 AnimatedAppIcon 위젯을 앱의 홈 화면이나 필요한 곳에 배치하여 앱 아이콘에 애니메이션을 적용할 수 있습니다.

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('앱 홈'),
      ),
      body: Center(
        child: AnimatedAppIcon(),
      ),
    );
  }
}

앱의 아이콘에 애니메이션을 적용하여 사용자의 시선을 끌어주는 방법에 대해 알아보았습니다. 이를 통해 앱의 사용자 경험을 개선하고 더욱 프로페셔널한 인상을 남길 수 있습니다.