Flutter에서 animated_splash_screen 패키지 사용법 및 옵션 가이드

 

모바일 애플리케이션에서 스플래시 화면은 사용자에게 첫인상을 주는 중요한 요소입니다. animated_splash_screen 패키지는 애니메이션이 적용된 스플래시 화면을 쉽게 구현할 수 있도록 도와줍니다. 이 블로그에서는 animated_splash_screen 패키지의 사용법과 다양한 옵션에 대해 자세히 설명하겠습니다.

1. animated_splash_screen 패키지란?

animated_splash_screen 패키지는 Flutter 애플리케이션에서 애니메이션이 적용된 스플래시 화면을 쉽게 구현할 수 있도록 도와주는 패키지입니다. 로고나 이미지를 애니메이션으로 표시하고, 일정 시간이 지나면 메인 화면으로 전환하는 기능을 제공합니다.

2. animated_splash_screen 패키지 설치하기

먼저, animated_splash_screen 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  animated_splash_screen: ^1.1.0

pubspec.yaml 파일을 저장한 후, 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

3. 기본 사용법

animated_splash_screen 패키지를 사용하여 기본적인 스플래시 화면을 구현하는 방법은 매우 간단합니다. AnimatedSplashScreen 위젯을 사용하여 쉽게 애니메이션 스플래시 화면을 추가할 수 있습니다. 다음은 간단한 예제입니다.

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

class SplashScreenExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedSplashScreen(
      splash: Icons.flutter_dash,
      nextScreen: HomeScreen(),
      splashTransition: SplashTransition.fadeTransition,
      backgroundColor: Colors.blue,
      duration: 3000,
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(child: Text('Welcome to the Home Screen!')),
    );
  }
}

void main() {
  runApp(MaterialApp(home: SplashScreenExample()));
}

위의 예제에서 AnimatedSplashScreen 위젯을 사용하여 Flutter 아이콘을 3초 동안 표시하고, 그 후 HomeScreen으로 전환하는 스플래시 화면을 구현했습니다.

4. AnimatedSplashScreen 위젯의 주요 옵션

AnimatedSplashScreen 위젯은 다양한 옵션을 제공하여 스플래시 화면을 커스터마이징할 수 있습니다. 주요 옵션들을 살펴보겠습니다.

splash

스플래시 화면에 표시할 위젯을 설정합니다. Image, Icon, Text 등을 사용할 수 있습니다.

splash: Icons.flutter_dash,

nextScreen

스플래시 화면 후에 표시할 다음 화면을 설정합니다. 보통 메인 화면을 설정합니다.

nextScreen: HomeScreen(),

splashTransition

스플래시 화면의 애니메이션 전환 효과를 설정합니다. SplashTransition.fadeTransition, SplashTransition.scaleTransition, SplashTransition.slideTransition 등이 있습니다.

splashTransition: SplashTransition.fadeTransition,

backgroundColor

스플래시 화면의 배경색을 설정합니다.

backgroundColor: Colors.blue,

duration

스플래시 화면이 표시되는 시간을 설정합니다. 밀리초 단위로 설정하며, 기본값은 2500ms입니다.

duration: 3000,

curve

애니메이션의 곡선을 설정합니다. Curves 클래스를 사용하여 다양한 애니메이션 곡선을 지정할 수 있습니다.

curve: Curves.easeInOut,

pageTransitionType

스플래시 화면에서 다음 화면으로 전환할 때의 애니메이션 타입을 설정합니다.

PageTransitionType 클래스를 사용하여 다양한 전환 효과를 지정할 수 있습니다.

pageTransitionType: PageTransitionType.leftToRight,

5. 예제 코드: 다양한 옵션 사용하기

다음은 animated_splash_screen 패키지의 다양한 옵션을 사용한 예제 코드입니다

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:page_transition/page_transition.dart';

class SplashScreenOptionsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedSplashScreen(
      splash: Image.asset('assets/logo.png'),
      nextScreen: HomeScreen(),
      splashTransition: SplashTransition.scaleTransition,
      backgroundColor: Colors.white,
      duration: 4000,
      curve: Curves.bounceOut,
      pageTransitionType: PageTransitionType.bottomToTop,
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(child: Text('Welcome to the Home Screen!')),
    );
  }
}

void main() {
  runApp(MaterialApp(home: SplashScreenOptionsExample()));
}

이 예제에서는 스플래시 화면에 로고 이미지를 사용하고, 4초 동안 표시하며, scaleTransition 애니메이션 효과를 적용했습니다.

또한, 전환 곡선을 bounceOut으로 설정하고, 스플래시 화면에서 다음 화면으로 전환할 때 bottomToTop 효과를 사용했습니다.

6. 결론

animated_splash_screen 패키지는 Flutter 애플리케이션에서 애니메이션이 적용된 스플래시 화면을 쉽게 구현할 수 있도록 도와주는 매우 유용한 도구입니다.

다양한 옵션을 사용하여 스플래시 화면을 커스터마이징하고, 사용자에게 인상적인 첫인상을 줄 수 있습니다.

이 가이드를 통해 animated_splash_screen 패키지를 효과적으로 활용하여 Flutter 애플리케이션의 사용자 경험을 향상시키길 바랍니다.

 

 

 

수발가족을 위한 일기장 “나비일기장”

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 대화방

https://open.kakao.com/o/gsS8Jbzg