flutter_native_splash 1.3.3 (splash 추가)

 

flutter splash 공문서 

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Dart Package

 

참고하면 좋은 다른 블로그의 포스팅 (터미널을 이용하여 flutter_native_splash 설치 방법을 알려줍니다.)

https://dev-yakuza.posstree.com/ko/flutter/splash-screen/

[Flutter] 스플래시 스크린

 

splash 이미지 파일 준비

-공식 문서에는 이미지 파일에 대한 특별한 조건이 명시 되어 있지 않으나 참고용으로 정리해봅니다.

• PNG 파일
• 3000px X 3000px 사이즈 이상의 이미지
• 준비한 파일을 assets/splash.png로 저장할 것

 

 

flutter_native_splash 설치하기

공식문서에서는 추가하는 것으로 나오지만 TERMINAL에서 이를 추가할 수 있습니다. flutter pub add flutter_native_splash 라고 입력후 enter

 

splash 이미지 설정

pubspec.yaml 파일을 열고 공식 문서에 나온것처럼 파일 하단에 내용을 추가를 하면 됩니다. * 이미지 대신 색상값을 넣어 확인 할 수 있습니다. 사용할 이미지 파일을 미리 생성하는 것은 중요한 일입니다.

flutter_native_splash:

  color: "#808080"

  #image: assets/splash.png

  branding: assets/dart.png

  branding_mode: bottom

  fullscreen: true

 

flutter_native_splash 패키지 옵션 확인하기

• 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)
• info_plist_files: info.plist 이름을 변경한 경우, 해당 파일을 설정하기 위한 옵션

 

splash 이미지 생성

flutter_native_splash 패키지의 옵션을 설정이 완료되었다면 다음 명령어를 TERMINAL에 입력해 이미지를 생성하도록 합니다. flutter pub run flutter_native_splash:create

 

생성까지 완료되었다면 애뮬레이터를 실행하여 splash screen이 제대로 나오는지 확인을 해보면 됩니다. 설정한 색상값이 잘 나오는 것으로 확인 완료했습니다. (*ᴗ͈ˬᴗ͈)ꕤ*.ﾟ