Flutter) flutter_native_splash 2.2.15 정리 [안드로이드]

 

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter Package

 

1. 설치

dependencies:
  flutter_native_splash: ^2.2.15

2. 안드로이드 12 대응하기

   A. flutter_native_splash.yaml 파일생성하기

   B. 파일에 작성하기

#안드로이드 12는 밑에 따로 있음
flutter_native_splash:
  #백그라운드색깔
  color: "#42a5f5"
  #백그라운드이미지 (전체화면으로 만들었으면 여기에 첨부)
  background_image: "assets/background.png"
  #중앙이미지(무조건 png) 이미지가 작으면 큰화면에서 깨지니까 큰 이미지를 넣어야함
  image: assets/splash.png

  #중앙이미지 밑에 조그마한 이미지 넣는곳
  branding: assets/dart.png

  #밑에 두는데 위치 bottom, bottomRight, bottomLeft
  branding_mode: bottom

  #디바이스가 다크모드일때
  color_dark: "#042a49"
  background_image_dark: "assets/dark-background.png"
  image_dark: assets/splash-invert.png
  branding_dark: assets/dart_dark.png

  #안드로이드12는 설정이 완전히 다르기 때문에 추가해주어야한다.
  #그리고 이미지 크기가 정해져있다.
  android_12:
    # 이미지 정리
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png
    #백그라운드색깔
    #color: "#42a5f5"
    
    #아이콘 백그라운드이미지 / 12는 아이콘 배경이 따로 있습니다.
    #icon_background_color: "#111111"
    
    #중앙이미지 밑에 조그마한 이미지 넣는곳
    #branding: assets/dart.png

    # 디바이스가 다크모드일때
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # 안드로이드 아이콘 위치 bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  # 세로 화면인지(portrait) 가로화면(landscape)인지 설정 안할지(unspecified)
  # 등등 16가지 있습니다.
  #android_screen_orientation: sensorLandscape

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  #android: false
  #ios: false
  #web: false

  # 모든 파라미터
  #color_android: "#42a5f5"
  #color_dark_android: "#042a49"
  #color_ios: "#42a5f5"
  #color_dark_ios: "#042a49"
  #color_web: "#42a5f5"
  #color_dark_web: "#042a49"
  #image_android: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.png
  #image_dark_web: assets/splash-invert-web.png
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-web.png"
  #background_image_dark_web: "assets/dark-background-web.png"
  #branding_android: assets/brand-android.png
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.png
  #branding_dark_ios: assets/dart_dark-ios.png

3. 설정 저장하기

flutter pub run flutter_native_splash:create

 

이렇게 설정하면 어디가 변경이 되는가?

 

여기 이미지가랑 배경화면 색깔 등등이 추가된다.

 

(좌)안드로이드 11 , (우) 안드로이드 12

최종 정리

 

1. 안드로이드 11 이하는 첨부한 사진을 그대로 사용하는거 같고

안드로이드 12는 위치나 크기가 정해져있는거 같다.

그러니까 그 사이즈에 맞게 넣지 않으면 이상하게 보일것이다.

 

2. 11 이하는 브랜딩 이미지가 밑에 너무 딱 붙는거 같다.
이미지 만들때 어느정도 공간을 주어야하나?