Flutter에서 네이티브 스플래시 화면을 간편하게 구현하는 방법: flutter_native_splash 사용법 가이드

 

앱 로딩 시 사용자에게 매력적인 경험을 제공하는 것은 매우 중요합니다.

Flutter에서 네이티브 스플래시 화면을 사용하면 앱 로딩 속도를 느낄 수 있도록 로딩 과정을 매끄럽게 보여줄 수 있습니다.

이 블로그 글에서는 flutter_native_splash 패키지를 사용하여 Flutter 앱에 네이티브 스플래시 화면을 간편하게 구현하는 방법을 단계별로 안내합니다.

1. flutter_native_splash 패키지 설치

pub add flutter_native_splash

 

2. 스플래시 이미지 준비

스플래시 화면에 표시될 이미지를 준비해야 합니다. 이미지는 각 플랫폼의 해상도에 맞게 여러 크기로 준비해야 합니다. 이미지 파일 이름은 다음과 같이 지정해야 합니다:

• Android: splash_{사용할 밀도}.png (예: splash_hdpi.png, splash_xhdpi.png)
• iOS: splash_{사용할 크기}.png (예: splash_iPhone6.png, splash_iPhoneX.png)

준비된 이미지는 프로젝트의 assets 폴더에 저장합니다.

3. flutter_native_splash.yaml 파일 생성

프로젝트 루트 디렉토리에 flutter_native_splash.yaml 파일을 생성합니다. 이 파일에 스플래시 화면의 모양, 색상, 애니메이션 등을 설정할 수 있습니다.

# flutter_native_splash.yaml

# 스플래시 화면 이미지 경로
background_image: assets/splash.png

# 로고 이미지 경로 (선택 사항)
logo: assets/logo.png

# 로고 위치 (선택 사항)
logo_position: center

# 로고 크기 (선택 사항)
logo_size: 150

# 애니메이션 종류 (선택 사항)
animation: spin

# 애니메이션 속도 (선택 사항)
animation_duration: 1000

# 스플래시 화면이 표시되는 시간 (초)
duration: 500

# 상태바 색상 (선택 사항)
status_bar_color: "#FF0000"

# 네비게이션바 색상 (선택 사항)
navigation_bar_color: "#0000FF"

 

4. 스플래시 화면 표시 및 제거

스플래시 화면 표시

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding); // 스플래시 화면 유지

  runApp(MyApp());
}

 

스플래시 화면 제거

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.show(); // 스플래시 화면 표시

  // 앱 로딩 및 초기화 작업 수행...

  FlutterNativeSplash.remove(); // 스플래시 화면 제거

  runApp(MyApp());
}

 

5. 추가 설정

flutter_native_splash.yaml 파일에서 다양한 설정을 추가하여 스플래시 화면을 원하는 대로 디자인할 수 있습니다.

자세한 내용은 [flutter_native_splash 공식 문서] 참고하십시오.

6. 주의 사항

• flutter_native_splash 패키지는 Android 5.0 이상 및 iOS 8.0 이상을 지원합니다.
• 스플래시 화면 이미지는 각 플랫폼의 해상도에 맞게 여러 크기로 준비해야 합니다.
• flutter_native_splash.yaml 파일의 설정은 실제 앱에서 사용하는 값과 일치해야 합니다.