[플러터] Splash 화면 변경하기 (로딩 화면)

Splash

앱을 실행하면 몇 초간 앱의 로고를 출력하는 로딩 스크린을 마주할 것이다.

플러터 앱을 에뮬레이터에서 디버깅을 할 때에는 잘 보지 못하지만,

실 기기에서 테스트시에는 앱 실행 전 하얀 blank 화면이 몇 초간 출력됨을 확실히 볼 수 있다.

(가벼운 네이티브 앱은 로딩이 거의 존재하지 않는다.)

 

이를 Splash 스크린이라고 하는데, 칙칙한 blank 화면을 간단한 방법으로 산뜻하게 바꿔보자.

 

 

방법

플러터 프로젝트에서 아래의 경로로 찾아간다.

android > app > src > main > res > drawable > launch_background.xml

이 xml 파일이 splash 화면 그 자체이다.

drawable 폴더에 원하는 로고 이미지를 넣은 후 아래와 같이 코드를 변경해보자.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
         <shape>
        <gradient
            android:angle="90"
            android:startColor="@color/gradientStart"
            android:endColor="@color/gradientEnd"
            android:type="linear" />
    </shape>
</item>

 <item
    android:gravity="center"
    android:width="180dp"
    android:height="180dp">
    <bitmap
        android:src="@drawable/splash"
        android:gravity="fill_horizontal|fill_vertical" />
   </item>
</layer-list> 

 

결과

로고는 곧 공개할 것이다..

배경은 보라색 계열의 그라데이션, 중앙에 로고가 위치한 것을 볼 수 있다.

이제 xml 파일을 수정하여 원하는 splash 스크린을 만들면 된다!