[Flutter] 스플래시 스크린

개요

Flutter를 사용해서 앱을 개발해 보려고 합니다. 이번 블로그 포스트에서는 Flutter에서 스플래시 스크린을 변경하는 방법에 대해서 알아봅니다.

스플래시 스크린을 변경하기 위해서는 안드로이드와 iOS에 맞게 이미지를 생성하고, 각각의 플랫폼에 맞게 스플래시 스크린을 설정해야 합니다.

Adding a splash screen to your mobile app

하지만 flutter_native_splash 패키지를 사용하면, 스플래시 스크린을 좀 더 쉽게 변경할 수 있습니다.

flutter_native_splash

이미지 파일 준비

공식 문서에 이미지 파일에 대한 특별한 조건이 명시되어 있지 않습니다. 저는 다음과 같은 이미지를 사용하였습니다.

PNG 파일
3000px X 3000px 사이즈 이상의 이미지

준비한 파일을 assets/splash.png로 저장합니다.

flutter_native_splash 설치

flutter_native_splash 패키지를 사용하기 위해서는 flutter_native_splash 패키지를 설치할 필요가 있습니다. 다음 명령어를 실행하여 flutter_native_splash 패키지를 설치합니다.

flutter pub add flutter_native_splash --dev

스플래시 이미지 설정

이제 스플래시 스크린으로 사용할 이미지 파일을 설정할 필요가 있습니다. 스플래시 스크린을 설정하기 위해 Flutter 프로젝트 폴더안에 ./flutter_native_splash.yaml 파일을 생성하고 다음과 같이 수정합니다.

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash.png
  fullscreen: true

flutter_native_splash 패키지 옵션

flutter_native_splash 패키지는 다양한 옵션을 가지고 있습니다

color: 스플래시 스크린의 배경색
background_image: 스플래시 스크린의 배경 이미지
image: 스플래시 스크린의 이미지
color_dark: 디바이스 설정이 다크 모드일 경우의 배경색
background_image_dark: 디바이스 설정이 다크 모드일 경우의 배경 이미지
image_dark: 디바이스 설정이 다크 모드일 경우의 스플래시 스크린 이미지
android_gravity: 안드로이드에서 스플래시 이미지의 위치를 설정합니다. (bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top)
ios_content_mode: iOS에서 스플래시 이미지의 위치를 설정합니다. (scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight)
web_image_mode: 웹에서 스플래시 이미지의 위치를 설정합니다. (center, contain, stretch, cover)
fullscreen: 스플래시 스크린을 전체 화면으로 표시할지 여부(true, false)
info_plist_files: info.plist 이름을 변경한 경우, 해당 파일을 설정하기 위한 옵션

스플래시 이미지 생성

flutter_native_splash 패키지의 옵션을 설정하였다면, 다음 명령어를 실행하여 스플래시 이미지를 생성합니다.

flutter pub run flutter_native_splash:create

팁

flutter_native_splash 패키지를 사용하여 스플래시 이미지를 생성하였다면, 더이상 특별한 수정이 스플래시 스크린을 표시할 수 있습니다.

스플래시 스크린을 다음의 팁들과 함께 사용하면 좀 더 유용합니다.

초기 데이터

보통 스플래시 스크린을 화면에 표시한 후, 초기 데이터를 가져오곤 합니다. 이때는 다음과 같이 Future와 async-await를 사용하여 스플래시 스크린이 표시된 상태에서 데이터를 가져올 수 있습니다.

import 'package:flutter/material.dart';

Future<void> main() async {
  bool data = await fetchData();
  print(data);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

Future<bool> fetchData() async {
  bool data = false;

  // Change to API call
  await Future.delayed(Duration(seconds: 3), () {
    data = true;
  });

  return data;
}
...

main 함수를 async-await로 변경한 후, runApp을 통해, 앱을 실행하기 전에 데이터를 가져옵니다. 이런 구조를 가지게 되면, 스플래시 스크린이 화면에 표시된 상태에서 데이터를 가져올 수 있습니다.

상태바

이 블로그 포스트에서는 pubspec.yaml에 fullscreen: true을 설정하여 스플래시 스크린을 생성하였습니다. flutter_native_splash의 버그인건지 모르겠지만, iOS에서 앱이 실행된 후, 상태바(Status Bar)가 표시되지 않습니다. 그래서 다음과 같이 코드를 수정하여 상태바를 표시하였습니다.

...
import 'package:flutter/services.dart';
...
class Home extends StatelessWidget {
  Home() {
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: SystemUiOverlay.values,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Hello world!'),
      ),
    );
  }
}

안드로이드 12 문제

안드로이드 12부터는 기본적으로 앱 아이콘이 스플래시 스크린으로 표시됩니다. flutter_native_splash에는 앱 아이콘 대신 다른 이미지를 표시하기 위한 옵션들을 제공하고 있습니다.

flutter_native_splash:
 android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

여기서 표시되는 이미지는 원형 아이콘 이미지로 짤려서 표시됩니다. 그래서 저는 이 옵션을 사용하지 않고 android/app/src/main/AndroidManifest.xml 파일에 다음과 같은 내용을 추가하여 사용하고 있습니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">
   <application
        android:label="app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            ...>
            ...
            <!-- Displays an Android View that continues showing the launch screen
                Drawable until Flutter paints its first frame, then this splash
                screen fades out. A splash screen is useful to avoid any visual
                gap between the end of Android's launch screen and the painting of
                Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                ...
            </intent-filter>
        </activity>
        ...
    </application>
</manifest>