플러터 아이콘 및 Splash screen 설정

앱 아이콘을 설정하고, 플러터가 로그인 화면을 렌더링 하기전 splash screen을 보여주려 한다.

💛 스플래시 스크린의 중요성

플러터는 앱이 실행될 때, 네이티브 앱이 플러터를 로드하는 동안 잠깐의 짧은 대기시간이 존재. 이 시간 동안 기본 앱의 흰색 화면이 스크린에 표시외며 마치 버벅거리는 것처럼 보인다.

버벅거리는 것 같은 화면을 방지하기 위해 네이티브 어플 단에서 플러터가 화면을 렌더링하기 전까지 스플래시 스크린을 보여주자.

최적화 팁

• 로딩 시간 최소화: 스플래시 스크린을 너무 오래 보여주면 사용자가 지루해할 수 있습니다. 가능한 한 빠르게 메인 화면으로 전환되도록 최적화하세요.
• 간결하고 명확한 디자인: 스플래시 스크린은 간결하고 명확해야 합니다. 복잡한 디자인은 로딩 시간을 늘릴 수 있습니다.
• 브랜딩 일관성: 스플래시 스크린은 앱의 브랜딩과 일관성을 유지해야 합니다. 사용자가 앱의 브랜드를 즉시 인식할 수 있게 하세요.

💛 flutter_launcher_icons

1. Package 다운

flutter pub add flutter_launcher_icons

2. puspec.yaml 설정

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/image/app-icon.png"
  min_sdk_android: 21

3. 아이콘 적용

flutter pub get
flutter pub run flutter_launcher_icons

💛 flutter_native_splash

• flutter_native_splash 패키지를 활용해 Splash 화면을 구현할 수 있다.

1. Package 다운

flutter pub add flutter_native_splash

2. splash screen 설정

• 프로젝트 루트 디렉토리 폴더에 flutter_native_splash.yaml 이름의 새 파일을 생성 후 아래의 다음과 같이 코드 추가

flutter_native_splash:

  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # This property allows you to specify an image used as branding in the splash screen. It must be
  # a png file. Currently, it is only supported for Android and iOS.
  #branding: assets/dart.png

  # Specify your branding image for dark mode.
  #branding_dark: assets/dart_dark.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #
  # Make sure this content mode value should not be similar to android_gravity value and
  # ios_content_mode value.
  #branding_mode: bottom

  # The color_dark, background_image_dark, and image_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # 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

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see
  # https://developer.android.com/reference/android/view/Gravity): bottom, center,
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # To hide the notification bar, use the fullscreen parameter.  Has no effect in web since web
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s) 
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

3. splash screen 적용

• 패키지를 적용하기 위해 터미널에서 아래와 같이 명령어 실행

flutter clean
flutter pub get
flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml 

(참고)
https://bangu4.tistory.com/369