[Flutter] flutter_native_splash 사용하기

앱을 다시 실행할 때마다 flutter 로고가 뜨는 것이 맘에 안 들어서 어떻게 해결할까하고 찾아보다가 flutter_native_splash 라는 플러그인을 찾게 되었슴니다.

유튜브에 잘 정리해준 채널이 있어 정리해서 내용 공유해봄니다.

https://www.youtube.com/watch?v=U1BErwaE3zo

---

1. Native Splash Screen vs Flutter Intro Screen

가장 큰 차이점은 Flutter 프레임워크 로딩 중에 보여지는 화면인지, 로딩된 이후에 보여지는 화면인지 인 것 같슴돠.

그래서 앱을 켰을때 Flutter 기본 로고 화면이 안 뜨게 하려면 Native Splash Screen에 손을 좀 대줘야 하는 것 같습니다

Native Splash Screen	Flutter Intro Screen
Flutter 프레임워크 밖에서 실행	Flutter 프레임워크 안에서 실행
Flutter 로딩 중 바로 보여짐	Flutter 프레임워크 로딩 된 후 바로 보여짐
필요할때만 보여짐	Warm start에도 보여짐
iOS 앱 만들려면 꼭 필요

 

2. flutter_native_splash 패키지 셋팅하기

1)flutter_native_splash 패키지 pubspec.yaml에 추가해주기(https://pub.dev/packages/flutter_native_splash)

2)pubspec.yaml 혹은 새로 생성한 yaml 파일에 flutter_native_splash 키 추가해주기

 

3. 배경색 바꾸기

1)flutter_native_splash 하위의 color에 원하는 color의 hex 값 입력(ios, android 12 미만 버전)

flutter_native_splash:

  android: true

  ios: true

  web: true

  color: "#d4e4ed" # 배경색 설정  

cf)android 12 이상 버전의 경우 : android_12 하위의 color에 hex 값 입력

flutter_native_splash:

  android: true

  ios: true

  web: true

  android_12:

    color: "#d4e4ed"

 

2)터미널 창에서 dart run flutter_native_splash:create 커맨드 입력 후 앱 재실행

성공하면 터미널 창에 다음과 같이 나옵니다. 

 

적용이 완료된 native splash screen 입니다. 

정상 실행된 로딩 화면

 

4. 중앙 이미지 및 하단 브랜딩 이미지 넣기

스플래시 화면의 중앙에 표시되는 이미지는 image 속성을, 하단부의 브랜딩 이미지는 branding 속성을 이용해서 추가할 수 있습니다. 

cf)공식 문서에 따르면 color 속성과 background_image 속성은 둘 중 하나만 쓸 수 있다고 되어있습니다.

1)ios 및 android 12 미만 버전

flutter_native_splash:

  android: true

  ios: true

  web: true

  background_image: "assets/background.png" 

  image : "assets/logo.png"

  branding : "assets/branding.png"

 

cf)android 12 이상 버전

flutter_native_splash:

  android: true

  ios: true

  web: true

  color: "#d4e4ed"

  # background_image: "assets/background.png"

  android_12:

    color: "#d4e4ed"

    image: "assets/android_logo.png"

    branding: "assets/android_branding.png"

여기서 신기한 점이 있는데, android_12 하위에 color, image, branding 만 넣으면 dart run flutter_native_splash:create 커맨드 입력시 No color string or background image! 에러가 뜬다는 것입니다;;

상위 속성에 color 혹은 background_image 속성을 정의해줘야 정상 실행됩니다.

왜그런지는 나중에 좀 더 탐구해보겠...)

 

2)터미널 창에서 dart run flutter_native_splash:create 커맨드 입력 후 앱 재실행

적용이 완료된 native splash screen입니다.

 

5. 다크모드일 경우 적용시킬 native screen 설정하기

다크모드에서 적용시킬 native screen 설정의 경우, 위에서 작업했던 속성명 뒤에 _dark 만 추가해주면 됩니다.(android_12도 동일)

flutter_native_splash:

  android: true

  ios: true

  web: true

  background_image: "assets/background.png"

  image: "assets/logo.png"

  branding : "assets/branding.png"

  background_image_dark: "assets/background_dark.png"

  image_dark: "assets/logo_dark.png"

  branding_dark: "assets/branding_dark.png"

  android_12:

    color_dark: "#808080"

    image: "assets/android_logo.png"

    branding: "assets/android_branding.png"

    image_dark: "assets/logo_dark.png"

    branding_dark: "assets/branding_dark.png"

 

참고로, android emulator에서 다크모드로 바꾸기 위한 방법은, settings > display > Dark theme 버튼을 클릭해주면 됩니다. 

dark theme 적용시키기

dark 모드에서 적용된 native splash screen입니다.

 

6. preserve, remove 메서드를 사용해 native flash screen 시간 조절하기

디폴트로 splash screen은 flutter가 첫 화면을 그리면 자동으로 사라지게 된다. 하지만, 앱 초기화 진행 시 조금 유지하고 싶다면, preserve와 remove 메서드를 써주면 된다. 

1)statelesswidget을 쓰고 있다면 statefulwidget으로 변경

→ 만약 statelesswidget 이라면, initState를 사용하기 위해 statefulwidget으로 변경해준다.

 

2)main 함수에서 ensureInitialized() 메서드와 preserve 메서드 써주기

void main() {

  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();

  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  runApp(const MyApp());

}

→ remove 메서드가 뜰 때까지 splash screen을 유지하기 위함이다

 

3)initState 내에서 remove 메서드 써주기

runApp이 MyApp 호출했을 때 호출될 initState 내에 remove 메서드를 가진 비동기 함수를 넣어준다.

여기서는 3초의 duration을 줬다. 

void initState() {

    // TODO: implement initState

    super.initState();

    initialization();

  }

  void initialization() async {

    print('pausing...');

    await Future.delayed(const Duration(seconds: 3));

    print('unpausing...');

    FlutterNativeSplash.remove();

  }

 

실행해보면, 3초간 수정된 splash screen이 보여지는 것을 볼 수 있습니다.

---

이상입니다.

읽어주셔서 감사합니다.