본문 바로가기
Development Solutions/Flutter & Dart

[flutter] how to make or apply splash screen (앱 실행화면(splash screen) 적용 방법)

by Dev Diary Hub 2022. 1. 16.
반응형

[flutter] 앱 실행화면(splash screen) 적용 방법

[flutter_native_splash] 앱 실행화면(splash screen) 적용 방법


flutter 라이브러리 사이트인 pub.dev에서 찾은 라이브러리, flutter_native_splash
(The flutter library site pub.library found in dev, plotter_native_splash)

flutter_native_splash

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Dart Package

Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.

pub.dev


설명 문서대로 적용하면 잘 적용된다.
(If applied as described in the documentation, it is well be applied.)

적용 순서 (Order of application)
  1. pubspec.yml에 아래를 추가 (Add below to pubspec.yml)
    1. dev_dependencies:
        flutter_native_splash: ^1.3.3
  2. dev_dependencies와 같은 레벨에 아래를 추가 (기본적인 옵션만 추가한 코드)  (Add below to the same level as dev_dependencies (code with only basic options added)) 
    1. flutter_native_splash:
       color: "#42a5f5" # 화면 색상
       image: assets/splash.png # 화면 위를 덮을 이미지
       android_gravity: center # 안드로이드에서 위 이미지를 어느 위치에 자리 잡을지 결정
       ios_content_mode: center # ios "
       web_image_mode: center # web "
       fullscreen: true # 스플래쉬 화면을 전체 스크린으로 보일지 결정. false처리하면 splash화면에서 위아래 흔들리는 문제가 나올 수 있음
       android12: true # 안드로이드 버전12 지원 유무

3. 터미널에 아래 명령어 실행 (Execute the command below on the terminal)

  1. flutter pub run flutter_native_splash:create

4. 옵션 변경 후, 다시 적용하려면 아래 명령어 실행 후, 3번 명령어(create) 실행 (To apply again after changing the option, run the command below, and then create command 3)

반응형