Flutter Native Splash - 온더테크

Contents

플러터 네이티브 스플래시 개요 (Overview of Flutter Native Splash)

flutter_native_splash는 플러터 앱의 스플래시 화면을 설정하고 관리하는 데 사용되는 패키지입니다. 이 패키지를 사용하면 Android와 iOS 플랫폼에 적합한 스플래시 화면을 손쉽게 추가할 수 있습니다. 앱 로딩 중 사용자 경험을 개선할 수 있는 중요한 도구입니다.

설치 방법 (Installation)

dev_dependencies:
  flutter_native_splash: ^2.2.19

pubspec.yaml 파일에 flutter_native_splash 패키지를 추가합니다.
패키지를 설치하기 위해 명령어를 실행합니다.

flutter pub get

구성 옵션 (Configuration Options)

pubspec.yaml 파일에 스플래시 화면 설정을 추가합니다. 주요 설정 옵션은 다음과 같습니다.

color: 스플래시 화면의 배경색.
image: 스플래시 화면에 표시할 이미지 경로.
android: Android 전용 설정.
ios: iOS 전용 설정.
fullscreen: 화면 전체를 차지하는 스플래시 화면 여부.

다음은 설정 예제입니다.

flutter_native_splash:
  color: "#ffffff"
  image: "assets/splash_image.png"
  android: true
  ios: true
  fullscreen: true

스플래시 화면 생성 (Generate Splash Screen)

설정을 완료한 후, 아래 명령어를 실행하여 스플래시 화면을 생성합니다.

flutter pub run flutter_native_splash:create

명령어 실행 후 Android와 iOS 프로젝트에 필요한 파일과 설정이 자동으로 추가됩니다.

커스텀 설정 (Custom Configuration)

스플래시 화면을 커스터마이징하려면 아래와 같은 설정을 추가할 수 있습니다.

android_gravity: Android에서 이미지 배치 위치 (center, top, bottom 등).
ios_content_mode: iOS에서 이미지 표시 모드 (scaleAspectFit, scaleAspectFill 등).
background_image: 배경 이미지를 사용할 경우 경로를 설정.

예제는 다음과 같습니다.

flutter_native_splash:
  color: "#000000"
  image: "assets/logo.png"
  android_gravity: center
  ios_content_mode: scaleAspectFit
  background_image: "assets/background.png"

스플래시 화면 제거 (Remove Splash Screen)

스플래시 화면을 제거하거나 초기화하려면 아래 명령어를 실행합니다.

flutter pub run flutter_native_splash:remove

주의 사항 (Cautions)

이미지는 png 형식이 권장되며, 배경색과 잘 어울리도록 디자인합니다.
flutter pub get 명령어를 실행한 후 스플래시 화면을 생성합니다.
프로젝트를 빌드하기 전에 설정 파일을 저장합니다.

문제 해결 (Troubleshooting)

스플래시 화면이 정상적으로 적용되지 않을 경우 다음을 확인합니다.

pubspec.yaml 파일에서 들여쓰기 및 설정이 올바른지 확인합니다.
flutter clean 명령어를 실행한 후 프로젝트를 다시 빌드합니다.
패키지 버전이 최신인지 확인합니다.

참고 자료 (References)

공식 문서 – Flutter Native Splash
Flutter 공식 문서

위 단계를 따르면 Android와 iOS 모두에서 스플래시 화면을 손쉽게 설정할 수 있습니다.

Post Views: 61