[Flutter] Splash/Launch Screen 설정하기 - Android

타닥타닥·2023년 9월 8일

[Flutter] Splash / Launch Screen 설정하기

목록 보기

2/3

여기에 사용된 애뮬레이터의 Android 버전은 14입니다.

우선, 이전 포스트에서 준비한 이미지 파일들을 리소스 폴더에 추가해주어야 합니다.

<project>/android/app/main/res를 보면, 아래와 같은 폴더 구조가 있습니다.

폴더명을 보면 mipmap- 뒤에 해상도가 적혀있는데, 준비한 이미지 폴더와 비슷한 구조입니다.

모든 폴더마다 각 폴더 해상도에 맞는 launch_image.png 파일을 추가해줍니다.

추가한 파일의 이름은 자유롭게 설정해도 되지만, 모든 폴더에서 같은 이름을 사용해야 합니다.

각 폴더마다 기본으로 들어있던 ic_launcher.png 파일은 앱의 아이콘 이미지입니다.
이 이미지를 변경하면 홈 화면에서의 앱 아이콘이 해당 이미지로 변경됩니다.

src 폴더를 다시 보면, drawable 폴더와 drawable-v21 폴더가 있습니다.

이 두 폴더는 각각 Android 5 미만 버전과, Android 5 이상 버전에서 사용됩니다.
(Android API v21은 5.0 롤리팝입니다.)

두 폴더는 모두 launch_background.xml 파일을 가지고 있습니다.
각 파일을 열고 아래 주석 처리된 부분의 주석을 해제합니다.

프로젝트 기본 코드의 android:src 속성값을 보면 launch_image 이름을 사용합니다.

개인적으로 딱히 이유가 없다면 오피셜에서 제공하는 기본값을 그대로 사용하는 걸 선호합니다.
아까 추가한 이미지 파일들의 이름을 launch_image.png로 지정한 이유입니다.

만약 본인이 지정한 파일명이 이와 다르다면, 코드에서 launch_image 부분을 파일 이름으로 바꾸어 작성하시면 됩니다.
단, 파일 확장자는 함께 작성하지 않습니다.

이걸로 스플래시 화면의 설정이 끝났습니다.

이제 Android 기기나 애뮬레이터에 앱을 빌드하고 실행해봅시다.

일단 스플래시 화면은 잘 뜨는 걸 확인할 수 있습니다.

하지만 저건 제가 원하는 이미지가 아닙니다. 앱의 아이콘이죠.

왜냐하면 Android 13 버전부터는 스플래시 화면 대신 앱의 아이콘이 노출되도록 변경되었기 때문입니다.

이 문제를 해결하려면 앱의 아이콘 이미지를 변경하면 됩니다.

아까 mipmap-* 폴더에 이미지 파일을 추가할 때 옆에 있던, 저 ic_launcher.png 파일들이 바로 앱의 아이콘 파일입니다.

기존 아이콘 파일들과 해상도를 맞춰서 준비한 아이콘 파일들로 교체해주면 됩니다.

여기까지 완료했다면, Android 13 이상의 스플래시 화면에서도 해당 아이콘이 표시됩니다.

다음은 iOS 앱에 스플래시 화면을 적용해보도록 하겠습니다.

코딩이 즐거운 개발자입니다.