[Flutter] flutter_native_splash

네이티브 코드를 건드리지 않고 스플래시 스크린을 작성하는 방법 입니다.

flutter_native_splash

스플래시 화면을 직접 작성해서 사용할 수도 있지만 약간의 버벅거림이 신경쓰여서 라이브러리를 사용했습니다.

flutter_native_splash ReadMe에서 보면 flutter_native_splash.yaml파일을 만들어서 내용을 입력하라고 나와있습니다.

pubspec.yaml파일에 라이브러리를 등록해주고

내용을 복사해서 flutter_native_splash.yaml 파일을 만들어줍니다.

flutter_native_splash:
  color: "#ffffff"
  background_image: assets/background.png
  image: assets/image.png
  branding: assets/branding.png
  branding_mode: bottom

  # 다크모드 설정
  color_dark: "#ffffff"
  background_image_dark: "assets/dark-background.png"
  image_dark: assets/splash-invert.png
  branding_dark: assets/dart_dark.png
  
  # Android 12 이상 버전에서 적용
  android_12:
  icon_background_color: "#ffffff"
  image_dark: assets/image.png
  color_dark: "#042a49"
  icon_background_color_dark: "#eeeeee"

기본적인 세팅은 이렇게 작성했습니다.
(적용하고 싶은 내용은 #주석을 지워주시면 됩니다.)

안드로이드가 지금 12버전 이상부터는 스플래시 화면에 아이콘을 가져와서 뿌려주는 방식으로 바뀌었다고 합니다.
그래서 지금 작성해야하는게 제일 상단에 있는 image는 ios, android 12 미만 기기에 적용되는 이미지 이고 android 12 : ... 이 부분이 android 12 이상 기기에 적용되는 이미지 입니다.

파일을 이렇게 작성하고나서

flutter pub run flutter_native_splash:create

이 명령을 터미널에 실행시켜 줘야 적용이 됩니다.

그리고 flutter_native_splash.yaml 파일의 내용을 수정하거나 삭제 했을 경우에는

flutter pub run flutter_native_splash:remove

remove를 하고 다시 create를 진행해주면 적용이 됩니다.