[Flutter] 안드로이드 12이상에서 앱 로딩화면을 개발할 때 중앙 사진이 짤리거나 일그러져 나오는 현상

flutter_native_splash를 사용하여 앱 로딩화면 개발 시 중앙 아이콘(image 태그) 이상현상

2023.05.30 - [개발 프레임워크/Flutter] - [Flutter] 앱 로딩화면(flutter_native_splash 사용)

[Flutter] 앱 로딩화면(flutter_native_splash 사용)

 

1. 위와 같이 flutter_native_splash로 안드로이드 앱 로딩화면을 개발할 때 앱 로딩화면의 중앙 사진이 짤리거나 일그러져 나오는 현상이 발생한다.

2. 이는 가운데 삽입되는 사진(image태그)이 구글의 정책과 맞지 않아서 인데 안드로이드 12이상부터 image의 적정한 사이즈는 아래와 같다.

Android 12+ 이미지태그 적용

1. 이미지 매개 변수입니다. 기본적으로 시작 프로그램 아이콘은 아래와 같이 사용된다.
 - 왼쪽에 표시된 것처럼 아이콘 배경이 없는 앱 아이콘: 이 값은 1152x1152픽셀이어야 하며 지름이 768픽셀인 원 안에 들어맞아야 한다.
 - 오른쪽에 표시된 것처럼 아이콘 배경이 있는 앱 아이콘: 이 값은 960x960픽셀이어야 하며 지름이 640픽셀인 원 안에 들어맞아야 한다.
2. icon_background_color는 선택 사항이며 아이콘과 창 배경 사이의 대비가 더 필요한 경우에 유용하다.
3. 전경의 3분의 1이 가려져 있다.
4. 색상 창 배경이 단일 불투명 색상으로 구성되어 있다.

 

 

여기서 1번의 이미지 매개 변수에 맞는 앱 아이콘 사이즈가 중요하다.

 - 아이콘 배경이 없는 앱 아이콘이라면 1152x1152 픽셀에 지름이 768픽셀인 원안에 들어가야하고 아이콘 배경이 있는 이미지라면 960x960 픽셀에 지름이 640픽셀인 원안에 들어가야 한다.

 - 이미지의 사이즈가 아이콘 이미지에 따라 각각 1152x1152, 960x960를 옳바르게 설정하더라도 지름이 맞지 않으면 잘릴 수 있다.

 

 

※ 주의

 background-image사진으로 앱 사진에 맞게 전체 사진을 로딩화면으로 덮어 씌운다고 해도 앱 아이콘으로 설정한 이미지가 이미지 매개 변수에 설정되어 앱 아이콘이 가운데 설정되는 것을 확인할 수 있다.