[Flutter] 스플래시 적용하기

준비물 : 생각보다 큰 스플래시 이미지 (ex. 4096 X 4096)

 

1. 패키지 설치

$ flutter pub add flutter_native_splash

 

2. pubspec.yaml 수정

• 파일 하단 아래 코드 추가
• fullScreen: true 적용시 상단 status bar 가 hidden 처리되니 잘 확인할 것!
  • 처음에 적용했다가 삭제했는데 캐시 때문인지 계속 status bar 가 안보여서 Info.plist 에서 관련 항목 삭제 후 빌드
• color 는 백그라운드 색상인데 스플래시 색상이랑 맞춰주면 좋을 것 같다!

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash.png

 

3. 스플래시 이미지 생성

// 최초
$ flutter pub run flutter_native_splash:create

// 재생성 시 기존 이미지 삭제 후 생성
$ flutter pub run flutter_native_splash:remove
$ flutter pub run flutter_native_splash:create

 

4. 일정 시간 보여주기

• 1500 도 생각보다 길다!

// main.dart
void main() async {
  await Future.delayed(const Duration(milliseconds: 1500));
  runApp(const MyApp());
}