Mobile/Flutter

[Flutter] splash image 추가하기

코코팜 2022. 4. 20. 18:14

어플리케이션을 실행시키면 초기 데이터를 받아 오는 잠깐의 시간동안 이미지를 띄워서 보여준다.

 

기존의 많은 앱들이 이런 방식을 사용하고 있으며 안드로이드, ios 모두 native에서 이 기능을 사용하는데 Flutter package 중에도 이를 지원하는 flutter_native_splash 가 있다.

 

https://pub.dev/packages/flutter_native_splash

 

flutter_native_splash | Flutter Package

Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.

pub.dev

 

적용하기

 

프로젝트 내 pubspec.yaml 에 해당 package를 추가해준다.

dependencies:
	flutter_native_splash: ^2.1.6

 

 

이제 띄어줄 화면에 대한 세팅을 하면 된다. pubspec.yaml 하단에 추가해주자.

flutter_native_splash:
  color: "#86E3CE"
  image: assets/images/splash_logo.png
  fullscreen: true

더 많은 다른 세팅값으로 커스터마이징 가능하다. 자세한건 pub docs를 읽어보자

 

 

이제 터미널에 해당 명령어를 치면 끝

flutter pub run flutter_native_splash:create