[Flutter] Splash 화면 구현 (스플래시 화면 구현)

봉구마·2022년 4월 4일
0

Flutter

목록 보기
1/6

splash 화면에 아이콘 붙이는 건 자주 해봐서 간단할 줄 알았는데 -
사람 이미지라 뭉개지면 모양이 많이 이상해져 비율을 잘 맞춰야했다 :(
(물론,, 회사 이미지라 보여주지는 못 하지만 ...)

내가 처음에 적용해본 패키지는 대중화 된 'flutter_natvie_splash'이다.
flutter_natvie_splash

제일 최신버전으로 pubspec에 패키지 적어주고 -

flutter_native_splash: ^2.1.3+1

pubspec에 패키지명과 버전뿐 아니라 splash screen 설정도 함께 작성해줬다.

flutter_native_splash:

  color: "#ffffff"
  image: images/splash.png
  android_gravity: center
  ios_content_mode: scaleAspectFill

위와 같이 설정해주었다.

처음에는 'fullScreen = true'도 같이 지정해줬는데 이건 notification bar가 보여지지 않게 하는 설정이었다.

또, 하나 헷갈린 점은 background_imageimage였다.

사실 처음에는 background_image에 넣고 왜 이미지 비율이 알맞지 않을까?
이러고 있었다니 ....
splash screen에 background_image는 말 그대로 splash screen image에 대한 뒷 배경 이미지를 말하는 거였다 ...

color가 주석처리 되어있지 않아서 아래 background_image만 보고 한참 거기에다가 이미지를 넣어봤다는 나,, 더 이상 이런 삽질은 하지 않기를 ...

image 안에 원하는 image src를 넣어주니 ios content_mode와 android_gravity도 설정이 잘 먹는다는 사실 ,,,:(

참고_splash screen 제작 시, 권장사항

profile
flutter 햇병아리 개발자

0개의 댓글