이번에는 Flutter에서 앱을 시작할 때 표시되는 Splash 화면(Splash Screen)의 구현 방법의 해설이 됩니다.

이미지 준비

스플래시 화면에 표시할 이미지를 준비합니다.

이번에는 아래와 같은 PNG 이미지를 준비했습니다.
이 이미지를 사용하여 Splash 화면을 구현합니다.

준비가 되면 사용하는 프로젝트 안에 적당한 디렉토리를 작성해, 그 안에 넣어 둡시다.
예를 들어이 기사에서는 assets/images에 이미지를 저장합니다.

패키지 도입

다음에 패키지의 도입을 해 갑시다.
이번 화면 작성에는 flutter_native_splash 라는 패키지를 사용합니다.
이 패키지를 사용하여 만들면 iOS, Android 모두에서 스플래시 화면을 구현할 수 있습니다.

패키지의 도입 방법에 관해서는 여기 에 해설 기사가 있으므로, 좋으면 참고로 해 주세요.

스플래시 화면 만들기

패키지 도입이 완료되면 스플래시 화면을 작성합니다.
pubspec.yaml에 다음과 같은 문장을 추가합니다.

flutter_native_splash:
  image: "assets/images/firstcat.png"
  color: "b5ce7f"

나는 아래 이미지처럼 배치했다.

이미지는 이미지의 경로이고 color는 16진수 컬러 코드입니다.
값과 경로는 자신의 프로젝트에 따라 각각 변경하십시오.

그런 다음 아래 명령을 작성 프로젝트 내에서 순서대로 실행합니다.flutter pub getflutter pub run flutter_native_splash:create
안전하게 구현되었습니다.


수고하셨습니다.
여기까지 보아 주셔서 감사합니다.

iOS에서 스플래시 화면 오류

iOS에서 스플래시 화면이 업데이트되지 않거나 스플래시 화면이 표시되기 전에 흰색 화면이 표시되는 경우가 있을 수 있습니다.

그 경우는 flutter clean 를 실행.
그 후 다시flutter pub getflutter pub run flutter_native_splash:create를 실행해보십시오.

또 그래도 해결되지 않는 경우는 스택 오버플로우 스레드 를 확인해 보면 좋은 것 같습니다.