flutter_native_splash

이번에 진행할 내용은 우리의 앱 아이콘에 이어서 화면의 대문을 만들어 보겠다.

 

잠깐 나타났다가  사라지는 화면일지언정 앱을 실행하면 무조건 봐야하는 화면

Splash Screen을 개발해 보겠다.

 

이것 또한 매우 많이 사용하다보니 아주 좋은 라이브러리가 존재 한다.

 

https://pub.dev/packages/flutter_native_splash/install

flutter_native_splash | Flutter Package

 

1. 설치하기

$ flutter pub add flutter_native_splash

 

2. 코드입력

1. pubspec.yaml 파일과 동일한 위치(root)에 flutter_native_splash.yaml 파일을 생성.
2. 아래의 코드를 작성하기.
3. android 12 이상의 버전은 android_12: 를 사용해서 따로 설정이 필요함.
4. branding 이미지를 배치할 순 있지만, Padding을 따로 줄 수 없기 때문에 이미지 자체에서 bottom 여백을 포함시켜야 함.

flutter_native_splash:
  color: "#4ADE80"
  image: assets/images/ic_launcher.png
  fullscreen: true
  #branding: assets/images/intro_img_logo.png
  #branding_mode: bottom


  android_12:
    color: "#4ADE80"
    image: assets/images/ic_launcher.png

  # dart run flutter_native_splash:create

 

3. 실행하기

터미널에 다음과 같이 입력하면 자동으로 파일 생성이 진행되며 splash 화면을 생성한다.

dart run flutter_native_splash:create

4. 추가 사항

스플래시 화면이 나오는 동안 로그인 확인 이라든지, DB 세팅이라든지 할 수 있다.

void main() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  await initHive(); // Hive 세팅

  await Future.delayed(const Duration(milliseconds: 1500)); // 1.5초 딜레이
  FlutterNativeSplash.remove();
  runApp(ProviderScope(child: _App())); // Provider 적용
}

---

앱 아이콘 등록 방법 : https://reenta.tistory.com/6