Splash Screen

이번 글에서는 splash screen에 대해서 알아보도록 하겠다
splash screen은 앱이 처음 시작할 때 잠시 2~3초 정도 나오는 스크린을 splash 스크린이라 한다

flutter는 android, ios를 동시에 개발하는 프레임워크라 설정도 따로 해주어야 한다

기존 다른 project에서는 splash screen을 직접 앱에 세팅해서 사용했었는데, 찾아보니 pub.dev에 괜찮은 라이브러리가 있어서 이걸 사용하기로 하였다

flutter_native_splash는 기존에 android, ios에 따로 세팅을 해줘야 했던 작업을 쉽게 해준다

dev_dependencies에 추가해준다

pubspec.yaml 파일 아래 부분에 아래와 같이 작성하면 된다

실제 프로젝트에서는 디자이너가 투입되서 작업을 하기에 splash screen을 png 파일로 받아서 사용을 할 것이다

background_image 만 지정해 주었지만 다른 옵션들이 더 있으니 써보면 좋을 것이다

pubspec.yaml

dev_dependencies:
  build_runner: ^2.0.1
  flutter_native_splash: ^1.2.0
  flutter_test:
    sdk: flutter


flutter_native_splash:
  background_image: assets/images/splash_background2.png
  # color: "#fafafa"

아래와 같이 작성하고 터미널에 명령어를 입력하고 앱을 다시 빌드하면 적용이 되어있다

create가 생성하는 것이고 기존 splash screen을 지우고 싶으면 remove 명령어를 치면된다
한 번 생성이 되면 수정을 하고 싶을 경우에도 먼저 remove하고 create 해야 한다

terminal

% flutter pub run flutter_native_splash:create
% flutter pub run flutter_native_splash:remove

Example