[flutter] Iconly 라이브러리의 아이콘을 사용한 앱 아이콘 애니메이션

14 Dec 2023

flutter

이번에는 Flutter 앱에 Iconly 라이브러리에 포함된 아이콘들을 사용하여 아이콘 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. Iconly 라이브러리 소개

Iconly는 모던한 UI/UX 디자인에 사용하기 적합한 1600개 이상의 다양한 아이콘을 제공하는 라이브러리입니다. 간단한 코드 몇 줄로 해당 아이콘을 쉽게 표현할 수 있습니다.

2. 아이콘 애니메이션 추가

먼저, pubspec.yaml 파일에 iconly: ^1.0.0를 dependencies에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  iconly: ^1.0.0

아래는 앱 아이콘 애니메이션을 만드는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:iconly/iconly.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IconAnimation(),
    );
  }
}

class IconAnimation extends StatefulWidget {
  @override
  _IconAnimationState createState() => _IconAnimationState();
}

class _IconAnimationState extends State<IconAnimation> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat(reverse: true);
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Icon Animation'),
      ),
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: Icon(
            IconlyLight.home,
            size: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위 예제 코드는 IconlyLight.home을 이용하여 홈 아이콘을 표시하고, 애니메이션을 적용하는 방법을 보여줍니다.

적절한 위치에서 앱을 실행하면, 홈 아이콘이 부드럽게 회전하는 애니메이션을 확인할 수 있습니다.

이렇게 Iconly 라이브러리를 사용하여 Flutter 앱에 아이콘 애니메이션을 추가할 수 있습니다.

더 많은 아이콘 및 라이브러리 기능을 활용하기 위해서는 공식 문서를 참고하시기 바랍니다.

3. 참고 자료

Iconly 라이브러리 공식 문서