이 튜토리얼에서는 velocity_x 패키지를 사용하여 Flutter 앱에서 스톱워치 애니메이션을 만드는 방법을 알아보겠습니다. velocity_x는 Flutter 앱의 애니메이션을 구현하기 위한 편리한 도구입니다.
1. velocity_x 패키지 추가하기
먼저, pubspec.yaml 파일에 velocity_x 패키지를 추가합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
velocity_x: ^1.2.0
그리고 pubspec.yaml 파일이 업데이트되었으면, 패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행합니다.
2. 스톱워치 애니메이션 컴포넌트 작성하기
이제 애니메이션을 표시할 스톱워치 컴포넌트를 작성해보겠습니다. 가정으로, 초침을 나타내는 StopwatchHand 위젯을 만들어보겠습니다.
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
class StopwatchHand extends StatelessWidget {
final double angle;
StopwatchHand(this.angle);
@override
Widget build(BuildContext context) {
return VxAnimatedContainer(
width: 5.0,
height: 80.0,
color: Colors.red,
transform: Matrix4.rotationZ(angle),
curve: Curves.linear,
duration: const Duration(milliseconds: 100),
);
}
}
위젯은 주어진 angle 값에 따라 회전하는 애니메이션을 표시합니다. VxAnimatedContainer 위젯을 사용하여 애니메이션을 구현하며, width, height, color, transform 등의 속성을 설정할 수 있습니다. 여기에서는 초침이므로 높이는 80으로 설정하였습니다.
3. 스톱워치 애니메이션 사용하기
이제 스톱워치 애니메이션을 사용하는 방법을 알아보겠습니다. 예를 들어, 앱의 화면에 스톱워치 컴포넌트를 추가하고 초침 애니메이션을 계속 업데이트하려면 다음과 같이 코드를 작성할 수 있습니다.
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
double angle = 0.0;
AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 60),
)..repeat();
_animationController.addListener(() {
setState(() {
angle = _animationController.value * 2.0 * 3.14159;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stopwatch Animation'),
),
body: Center(
child: StopwatchHand(angle),
),
),
);
}
}
위의 코드에서는 AnimationController를 사용하여 초침 애니메이션을 제어합니다. 애니메이션 컨트롤러는 vsync 및 duration을 설정하고, repeat 메소드를 호출하여 애니메이션을 반복하도록 설정합니다.
addListener 메소드를 사용하여 애니메이션 컨트롤러의 값이 변경될 때마다 angle 변수를 업데이트하고, 이를 다시 화면에 표시하여 초침 애니메이션을 구현합니다.
마지막으로, 스톱워치 컴포넌트를 앱 화면의 중앙에 배치하여 작업이 완료됩니다.
결론
velocity_x 패키지를 사용하여 스톱워치 애니메이션을 만드는 방법을 알아보았습니다. 이를 통해 Flutter 앱에서 다양한 애니메이션을 쉽게 구현할 수 있습니다. velocity_x 패키지의 다양한 기능을 살펴보고, 앱의 사용자 경험을 향상시키는 멋진 애니메이션을 만들어보세요!