Flutter는 Google에서 개발한 UI 프레임워크이며, 여러 플랫폼에서 동일한 코드로 애니메이션 효과를 만들 수 있습니다. 이번에는 Flutter에서 cupertino_icons 패키지를 사용하여 아이콘을 애니메이션화 시키는 방법을 알아보겠습니다.
cupertino_icons 패키지 추가하기
먼저, pubspec.yaml 파일에서 cupertino_icons 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 cupertino_icons: ^1.0.2를 추가합니다.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
cupertino_icons 패키지를 추가한 후에는 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아야 합니다.
애니메이션 추가하기
이제 애니메이션을 추가해보겠습니다. 먼저, import 'package:flutter/cupertino.dart'; 문을 통해 cupertino_icons을 가져옵니다. 그리고 애니메이션을 추가할 위젯을 생성합니다. 아래의 예제는 클릭할 때마다 아이콘이 회전하는 기능을 구현하는 위젯입니다.
class AnimatedIconWidget extends StatefulWidget {
const AnimatedIconWidget({Key? key}) : super(key: key);
@override
_AnimatedIconWidgetState createState() => _AnimatedIconWidgetState();
}
class _AnimatedIconWidgetState extends State<AnimatedIconWidget>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
_animation = Tween<double>(begin: 0, end: 1).animate(_controller);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return RotationTransition(
turns: _animation,
child: GestureDetector(
onTap: () {
if (_controller.isAnimating) {
_controller.stop();
} else {
_controller.repeat();
}
},
child: Icon(CupertinoIcons.refresh),
),
);
}
}
AnimatedIconWidget은 StatefulWidget을 상속받으며, _AnimatedIconWidgetState는 SingleTickerProviderStateMixin을 함께 상속받습니다. 이렇게 함으로써 AnimationController와 Animation을 생성하고 애니메이션을 구현할 수 있습니다.
위 코드에서 initState에서는 AnimationController와 Animation을 초기화하고, _controller.repeat()을 호출하여 애니메이션을 반복적으로 실행합니다. dispose에서는 AnimationController를 정리합니다.
build 메소드에서는 RotationTransition 위젯을 사용하여 아이콘을 회전시키는 애니메이션을 구현합니다. 클릭 이벤트를 처리하기 위해 GestureDetector를 사용하고, 클릭할 때마다 애니메이션을 시작하거나 정지시킵니다. Icon 위젯은 CupertinoIcons.refresh를 통해 리프레시 아이콘을 보여줍니다.
사용하기
이제 AnimatedIconWidget을 원하는 곳에서 사용할 수 있습니다. 예를 들어, Scaffold의 body 속성에 위젯을 추가하여 화면에 출력할 수 있습니다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Animated Icon Example"),
),
body: Center(
child: AnimatedIconWidget(),
),
),
);
}
}
void main() {
runApp(MyApp());
}
위 코드에서는 AnimatedIconWidget을 Center 위젯을 사용하여 화면 가운데에 배치하였습니다. 이제 앱을 실행하면 아이콘이 화면 가운데에서 회전하면서 출력됩니다.
이렇게 cupertino_icons 패키지를 사용하여 아이콘을 애니메이션화 시킬 수 있습니다. 추가적으로 다양한 애니메이션 효과를 적용해보거나, 사용자의 요구에 따라 커스텀 애니메이션을 만들 수도 있습니다. Flutter는 다양한 애니메이션 기능을 제공하므로 크리에이티브한 UX를 구현할 수 있는 좋은 도구입니다.
참고 자료: