[flutter] 애니메이션과 함께 사용되는 플러터 패키지 소개
애니메이션은 사용자 경험을 향상시키는데 중요한 부분이며, Flutter에서 애니메이션을 쉽게 구현할 수 있게 도와주는 다양한 패키지들이 존재합니다.
이번 글에서는 플러터(Flutter) 앱에서 애니메이션을 적용할 때 유용한 패키지 몇 가지를 소개하고자 합니다.
목차
flutter_animations
flutter_animations 패키지는 다양한 애니메이션 커브와 프리셋 애니메이션을 제공하여, 플러터(Flutter)에서의 애니메이션 구현을 간편하게 만들어줍니다.
예제 코드
import 'package:flutter_animations/flutter_animations.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: FlareAnimation(
'assets/loading.flr',
)
),
),
);
}
animated_widgets
animated_widgets 패키지는 다양한 애니메이션 효과가 적용된 위젯들을 제공하여, 애니메이션이 필요한 경우 별도의 커스텀 애니메이션을 구현하지 않고도 간편하게 애니메이션을 적용할 수 있습니다.
예제 코드
import 'package:animated_widgets/animated_widgets.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: BounceIn(
duration: Duration(seconds: 2),
child: Text("Animated Text"),
)
),
),
);
}
flutter_sequence_animation
flutter_sequence_animation 패키지는 여러 개의 애니메이션 스텝을 연속적으로 실행할 수 있는 기능을 제공하여, 여러 단계로 나눠진 애니메이션을 구현할 때 유용합니다.
예제 코드
import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: SequenceAnimation(
[
Animatable(
duration: Duration(seconds: 1),
height: Tween(begin: 0.0, end: 100.0),
width: Tween(begin: 0.0, end: 100.0),
),
Animatable(
duration: Duration(seconds: 1),
height: Tween(begin: 100.0, end: 200.0),
width: Tween(begin: 100.0, end: 200.0),
),
],
)
),
),
);
}
위의 패키지들은 플러터(Flutter) 앱에서 애니메이션을 구현할 때 유용하게 활용될 수 있습니다. 애니메이션을 통해 사용자 경험을 높이고 다이내믹한 인터페이스를 구현하는데 이러한 패키지들은 매우 유용한 역할을 할 것입니다.