Flutter 기본 흰 화면(White Flash) 제거하기

Flutter 앱을 실행하면 커스텀 스플래시 화면이 나오기 전에 흰 화면이 잠깐 번쩍할 때가 있어요. Flutter 엔진이 로딩되는 동안 OS가 보여주는 네이티브 스플래시 화면이고, 기본값이 흰색이라 눈에 띄어요.

이 글에서는 flutter_native_splash 패키지로 이 화면을 바꾸는 방법을 정리했어요.

왜 흰 화면이 보이는가?

Flutter 앱의 실행 흐름은 이래요:

앱 실행 → [네이티브 스플래시] → Flutter 엔진 로딩 → [Flutter 위젯 렌더링]

Flutter 엔진이 로딩되기 전에는 Dart 코드가 실행될 수 없기 때문에, OS가 네이티브 레벨에서 정적 화면을 보여줘요. 이게 Android의 launch_background.xml, iOS의 LaunchScreen.storyboard예요.

기본값이 흰 배경이라, 커스텀 스플래시가 어두운 색이면 흰색 → 커스텀 스플래시 전환이 눈에 띄어요.

해결 방법

1. 패키지 설치

flutter pub add flutter_native_splash

2. pubspec.yaml 설정

pubspec.yaml에 설정을 추가해요. 프로젝트 루트의 flutter_native_splash.yaml 파일에 따로 둬도 돼요.

flutter_native_splash:
  color: "#009CCC"              # 배경색 (커스텀 스플래시와 비슷한 색)
  image: assets/images/logo.png # 중앙에 표시할 로고 (선택사항)
  android: true
  ios: true

  # Android 12 이상은 위 설정이 적용되지 않아서 따로 지정해요
  android_12:
    color: "#009CCC"
    image: assets/images/logo.png  # 화면 중앙 원 안에 잘려서 표시됨

flutter:
  uses-material-design: true
  # ...

Tip: 커스텀 스플래시가 그라데이션이라면 중간색을 배경색으로 설정하면 전환이 자연스러워요. 그라데이션을 그대로 쓰고 싶다면 color 대신 background_image에 그라데이션 이미지를 넣을 수도 있어요 (Android 12+ 제외).

3. 네이티브 스플래시 생성

dart run flutter_native_splash:create

이 명령어가 Android/iOS 네이티브 파일을 수정해요:

• Android: launch_background.xml, styles.xml
• iOS: LaunchScreen.storyboard, Assets.xcassets

4. main.dart 수정 - 스플래시 유지

기본 동작은 Flutter가 첫 프레임을 그리면 네이티브 스플래시가 사라지는 거예요. preserve()를 호출하면 remove()를 부를 때까지 네이티브 스플래시가 유지돼요.

import 'package:flutter_native_splash/flutter_native_splash.dart';

Future<void> main() async {
  // Flutter 바인드 준비 + 네이티브 스플래시 유지
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  // Firebase, SDK 초기화 등...
  await Firebase.initializeApp();

  runApp(MyApp());
}

5. 스플래시 화면에서 제거

커스텀 Flutter 스플래시 위젯의 initState()에서 네이티브 스플래시를 제거해요.

import 'package:flutter_native_splash/flutter_native_splash.dart';

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();

    // 네이티브 스플래시 제거 → Flutter 스플래시가 보이기 시작
    FlutterNativeSplash.remove();

    // 서버 체크, 인증 확인 등 비즈니스 로직...
    _checkServerAndAuth();
  }
}

최종 실행 흐름

앱 실행
  → 네이티브 스플래시 (#009CCC + 로고) ← 흰 화면 대신!
  → Flutter 엔진 로딩 (네이티브 스플래시 계속 유지)
  → Flutter 스플래시 위젯 initState() 실행
  → FlutterNativeSplash.remove() 호출
  → 커스텀 스플래시 (그라데이션 + 애니메이션)
  → 메인 화면

네이티브 스플래시 vs Flutter 스플래시

주의사항

• 그라데이션은 background_image로 이미지를 넣어야 해요. Android 12 이상은 배경 이미지를 지원하지 않아서 단색만 돼요.
• Android 12 이상은 android_12 섹션을 따로 설정해야 해요. 로고는 화면 중앙의 원 안에 잘려서 보여요.
• preserve() 후 remove()를 반드시 호출해야 해요. 안 하면 스플래시가 계속 남아 있어요.
• 네이티브 스플래시에서 서버 체크, Firebase 인증 같은 Dart 로직은 실행할 수 없어요.
• 설정 변경 후에는 dart run flutter_native_splash:create를 다시 실행해야 해요.
• iOS는 캐시 때문에 변경이 안 보일 수 있어요. 패키지 README는 앱 삭제 → 기기 재시작 → 재설치를 안내해요.

정리

flutter_native_splash로 네이티브 스플래시의 배경을 바꾸고, 필요하면 두 줄로 유지·제거 시점을 정해요:

// main()에서 유지
FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

// 스플래시 화면에서 제거
FlutterNativeSplash.remove();