Splash 이미지 생성 / 변경 / 제거하기 (flutter_native_splash)

앱 구동 확인이 완료된 다음 앞으로 개발할 앱에 맞춰서 Splash 이미지를 생성/변경/제거하도록 하겠습니다.

 

 

 

flutter_native_splash 플러그인 설치 및 설정

 

Flutter 플러그인 중에 flutter_native_splash라는 플러그인이 있습니다.

 

https://pub.dev/packages/flutter_native_splash

 

이 플러그인은 splash 이미지를 쉽고 빠르게 만들어주는 플러그인으로 만약 사용하고 있지 않다면 사용하는 것을 권장드립니다.

 

사용법은 굉장히 쉽습니다. 

 

우선 플러그인을 설치합니다.

 

flutter pub add flutter_native_splash --dev

 

설치 후 pubspec.yaml 파일 맨 아래에 아래와 같이 작성을 해줍니다.

 

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash.png
  fullscreen: true

 

간단히 설명하자면 아래와 같습니다.

 

color: // 스플래시 스크린의 배경색
background_image: // 스플래시 스크린의 배경 이미지
image: // 스플래시 스크린의 이미지
color_dark: // 디바이스 설정이 다크 모드일 경우의 배경색
background_image_dark: // 디바이스 설정이 다크 모드일 경우의 배경 이미지
image_dark: // 디바이스 설정이 다크 모드일 경우의 스플래시 스크린 이미지
android_gravity: // 안드로이드에서 스플래시 이미지의 위치를 설정합니다. (bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top)
ios_content_mode: // iOS에서 스플래시 이미지의 위치를 설정합니다. (scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight)
web_image_mode: // 웹에서 스플래시 이미지의 위치를 설정합니다. (center, contain, stretch, cover)
fullscreen: // 스플래시 스크린을 전체 화면으로 표시할지 여부(true, false)

 

 

 

Splash 이미지 생성

 

플러그인까지 모두 설정이 완료되었다면, splash 이미지를 생성하도록 하겠습니다.

 

splash 이미지 생성은 아래 명령어를 통해 간단히 설정할 수 있습니다.

 

flutter pub run flutter_native_splash:create

 

정상적으로 생성이 완료되었다면 아래와 같은 메세지를 확인할 수 있습니다.

 

Splash 이미지 생성

이 후 flutter run을 통해 정상적으로 생성되었음을 알 수 있습니다. 

 

 

 

Splash 이미지 삭제

 

splash 이미지를 삭제하고자 할 경우 아래 명령어를 사용합니다.

 

flutter pub run flutter_native_splash:remove

 

 

Splash 이미지 변경

 

splash 이미지를 변경하고자 할 경우 삭제 후 새로 생성하면 됩니다.