[flutter] 앱 로딩 화면에 리퀴드 스와이프 애니메이션 적용하기
목차
필요한 패키지 설치
먼저, 애니메이션을 구현하기 위해 liquid_swipe 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.
dependencies:
liquid_swipe: ^1.4.0
패키지를 설치한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져와주세요.
애니메이션 구현
다음으로, 앱의 로딩 화면에 리퀴드 스와이프 애니메이션을 구현해보겠습니다. 리퀴드 스와이프 애니메이션을 구현하는 방법은 다음과 같습니다.
import 'package:liquid_swipe/liquid_swipe.dart';
import 'package:flutter/material.dart';
class LoadingAnimation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: LiquidSwipe(
pages: [
Container(color: Colors.blue),
Container(color: Colors.red),
Container(color: Colors.green),
],
),
);
}
}
위의 예시 코드에서는 liquid_swipe 패키지를 사용하여 세 개의 색이 다른 컨테이너로 구성된 슬라이드를 만듭니다.
화면에 애니메이션 추가
마지막으로, 위에서 구현한 애니메이션을 로딩 화면에 추가해보겠습니다.
import 'package:flutter/material.dart';
import 'loading_animation.dart';
void main() {
runApp(MaterialApp(
home: LoadingAnimation(),
));
}
이제 앱을 실행하면 리퀴드 스와이프 애니메이션이 추가된 로딩 화면을 확인할 수 있을 것입니다.
이제 앱의 로딩 화면에 리퀴드 스와이프 애니메이션을 적용하는 방법에 대해 살펴보았습니다. 알게된 내용이 도움이 되기를 바래요!