【Flutter】런처 스크린 설정

Flutter를 사용하는 경우 런처 화면을 설정하는 방법입니다.

안드로이드 편



디렉토리 android/app/src/main/res/drawable/ 로 설정해 갑니다.


런처 이미지 저장



drawable 디렉토리 바로 아래에 런처 화면에 표시되는 이미지를 배치합니다.
이 기사에서는 launcher.png를 배치했다고 가정합니다.


launch_background.xml 편집


drawable 디렉토리 바로 아래에 원래 launch_background.xml 에 런처 이미지 설정을 기술합니다.

launch_background.xml
<?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 android:drawable="?android:colorBackground" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

상기가 초기 상태이며, 여기에 상기 화상의 설정을 기술합니다.<item> 의 코멘트를 해제하고 아래와 같이 다시 씁니다.android:src="@mipmap/launch_image"android:src="@drawable/launcher"
이미지 설정을 기술한 것이 아래와 같습니다.

launch_background.xml
<?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 android:drawable="?android:colorBackground" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launcher" />
    </item>
</layer-list>

배경색 설정에 대해서는 drawable 와 같은 계층에 있는 values 디렉토리의 colors.xml 를 참조하면, <color name="{カラー設定名称}">#212121</color> 라고 하고 기재되어 있습니다.
※이 기사내에서는 칼라 설정 명칭을 `bg_color_launcher*로 옮겨 기술합니다.

그쪽을 <item android:drawable="?android:colorBackground" /> 에 아래와 같이 기술해 갑니다.<item android:drawable="@color/bg_color_launcher" />@color/bg_color_launcher
최종적으로는 아래와 같이 되어 있다고 생각합니다.

launch_background.xml
<?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 android:drawable="@color/bg_color_launcher" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launcher" />
    </item>
</layer-list>

여기에서 설정 완료입니다. 에뮬레이터 등으로 확인해 보십시오.
어플리케이션의 기동시에 설정한 화상이 표시되고 있으면 완성입니다.

iOS편



ios에 대해 Xcode에서 작업합니다.@drawable/launcher 디렉토리에서 마우스 오른쪽 버튼을 클릭하십시오. iOS를 선택하면 Xcode가 시작됩니다.


이미지 등록 Flutter->Open iOS module in Xcode



런처용 이미지를 등록합니다. Assets.xcassets를 선택하십시오. 그러면 launchImage를 등록하는 UI가 표시됩니다.
우선 1x, 2x, 3x로 표시된 위의 사각형 영역으로 이미지를 드래그하십시오.


배경색 설정



배경색의 설정에 관해서는 Runner/Assets.xcassets -> LaunchScreen.storyboard 를 선택 상태로 해 맨 오른쪽의 팔레트내에 있는 view 의 선택 박스로부터 설정하는 것이 가능합니다.


이상으로 iOS의 에뮬레이터 등으로 확인해 보세요. 문제없이 표시된다고 생각합니다.

이상입니다.

좋은 웹페이지 즐겨찾기