2024. 12. 26. 12:27ㆍ모바일어플개발/Flutter Tips
안녕하세요 totally 개발자입니다.
flutter_native_splash를 사용하면 간단하게 스플래시 화면을 구축할 수 있는데, 단점은 직접 커스텀해서 만들 수는 없어서 정해진 틀 안에서 사용하시면 좋은 패키지입니다.
이 패키지를 사용하면 화면의 중앙부, 하단부, 배경 이 3 부분을 활용해서 제작을 해야 합니다.
pubspec.yaml 맨 하단에
flutter_native_splash:
color: "#ffffff" # 배경 색
image: "assets/splash_image.png" # 중앙 이미지
branding: "assets/branding_image.png" # 하단 이미지
android_12:
color: "#ffffff"
image: "assets/splash_android12_image.png"
branding: "assets/branding_image.png"
위와 같은 형태로 넣으시고 터미널에서 dart run flutter_native_splash:create 명령어를 입력하시면 됩니다.
그런데 위와 같이 할 경우, 아이폰에서는 문제 없으나 안드로이드 계열에서 중앙 이미지가 crop 되어 잘려서 보이는 경우가 있는데 이럴 때에는 공식문서에 나와 있는 대로 1152 x 1152 사이즈의 프레임 이미지를 미리 준비해주신 뒤에 그 다음 768 x 768 사이즈의 원래 넣으시려는 이미지를 그 1152 x 1152 사이즈 이미지의 정 가운데로 이동시켜 주시면 됩니다. 즉 이미지 안에 이미지를 위치시키는 것입니다. 만약 정사각형 형태라면 768 사이즈보다 조금 더 작게 해주시면 crop이 되어도 문제 없이 모두 표시되는 것을 확인해볼 수 있습니다. 즉 아래처럼 하시면 되는 것입니다. (아래 이미지는 이해를 돕기 위한 것으로 실제로는 정 중앙에 배치되도록 정사각형 또는 타원이 아닌 지름이 같은 원 이미지를 사용하셔야 합니다)
개발에 도움이 되셨기를 바랍니다. 감사합니다.