[Flutter] 스플래시 스크린

2021-06-20 hit count image

이번 블로그 포스트에서는 Flutter에서 스플래시 스크린을 변경하는 방법에 대해서 알아봅시다.

개요

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

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

하지만 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

스플래시 이미지 설정

이제 스플래시 스크린으로 사용할 이미지 파일을 설정할 필요가 있습니다. pubspec.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 패키지를 사용하여 스플래시 이미지를 생성하였다면, 더이상 특별한 수정이 스플래시 스크린을 표시할 수 있습니다.

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

초기 데이터

보통 스플래시 스크린을 화면에 표시한 후, 초기 데이터를 가져오곤 합니다. 이때는 다음과 같이 Futureasync-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.yamlfullscreen: true을 설정하여 스플래시 스크린을 생성하였습니다. flutter_native_splash의 버그인건지 모르겠지만, iOS에서 앱이 실행된 후, 상태바(Status Bar)가 표시되지 않습니다. 그래서 다음과 같이 코드를 수정하여 상태바를 표시하였습니다.

...
import 'package:flutter/services.dart';
...
class Home extends StatelessWidget {
  Home() {
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
  }

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

완료

이것으로 Flutter에서 스플래시 스크린을 변경하는 방법에 대해서 살펴보았습니다. flutter_native_splash 패키지를 사용하면 이처럼 간단하게 Flutter 앱의 스플래시 스크린을 변경할 수 있습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts