[Flutter] 앱 구동시 Splash 화면 만들기

보통 앱들은 첫 구동시에 Splash 화면을 먼저 보여주고 로그인 화면이나 메인 화면으로 이동하는 경우가 많다.

이유야 여러가지 있겠으나, 밋밋함을 없애기 위해서 추가하는 경우도 있을꺼고, 앱 자체가 무겁다보면 데이터를 불러오는 시간도 길어지기 마련이다. 후자같은 경우에는 Widget 내에서 FutureBuilder를 써서 딜레이를 줄 수도 있겠으나 각자 취향 차이이고 이유는 많으니까 .. 솔직히 난 전자에 속해서 Splash를 구현했다.

 

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter Package

 

먼저, assets 폴더를 만들어 이미지를 넣어주고 적용을 먼저 시켜주자.

나는 assets/images 폴더를 생성해 안에 test.jpg라는 이미지를 만들어 주었다.

일단 이미지를 프로젝트에 적용시키기 위해서

pubspec.yaml에서 

assets:
  - assets/images/

라고 지정해주었다.

 

그 중에 나는 flutter_native_splash를 사용하여 구현했다. 사용방법은 간단하다.

 $ flutter pub add flutter_native_splash

터미널에서 명령어를 입력해서 라이브러리를 설치해도 되고, pubspec.yaml 파일에

dependencies:
  flutter:
    sdk: flutter

안쪽에 직접 입력해서 pub get 해주어도 상관없다. 입력할때 위치를 잘 잡아줘야 오류가 안뜨는데

이해하기 쉽게 2칸 띄워서 입력해주면 된다.

 

그리고 나는 프로젝트 최상단에 flutter_native_splash.yaml 파일을 생성해주었다. 

 

이렇게 입력을 해주면 된다.

image : 이미지 경로

color : 이미지 색상

background_image : 배경 이미지

 

ex)

  flutter_native_splash:
    image: assets/images/test.jpg
    color: "FFFFFF"
#    background_image:

나는 배경 이미지는 적용하지 않았다. 이렇게 설정해주었다면 90%는 끝이 났다.

나는 저작권 없는 무료 이미지 사이트를 이용해 그냥 눈에 띄는 자연 배경 이미지를 넣었다.

이제 명령어를 통해 활성화를 시켜주면 되는데

 

flutter pub run flutter_native_splash:create

이게 끝이다.

 

Terminal에 [Android] Creating default splash images 문구를 시작으로

✅ Native splash complete.
Now go finish building something awesome! � You rock! ��

라는 문구가 뜨면 성공적으로 적용이 된거다.

 

자 이제 프로젝트를 다시 돌리면 ?

성공적으로 Splash 화면이 최초 화면에 등록이 되서 표기될 것이다.

 

flutter_native_splash 적용화면

반대로 이미지를 변경하고 싶다면?

  flutter_native_splash:
    image: assets/images/after.jpg
    color: "FFFFFF"
#    background_image:

경로와 이미지 이름을 확인해서 변경해주고, 

flutter pub run flutter_native_splash:create

전과 같이 입력해주면 ?

변경된 이미지

이미지가 바뀌었다.

 

마지막으로 삭제하는 방법!

flutter pub run flutter_native_splash:remove

성공적으로 사라졌다.

사용하기 간편하기 때문에 누구든 구현하는데 어려움이 있지 않을 것이라 생각한다.

사람도 첫 인상이 중요하다고들 하는데 첫 화면에 자기가 만드는 앱에 맞는 이미지를 넣어 큰 인상을 남겨보자.

 

* 저작권 없는 무료 이미지를 사용하였습니다. *

* https://unsplash.com/ko/t/nature * 이미지

* https://unsplash.com/ko/%EB%9D%BC%EC%9D%B4%EC%84%A0%EC%8A%A4 * 라이센스