【Flutter】스플래시 화면을 구현해 본다【flutter_native_splash】

이 기사에서 할 것.

flutter_native_splash 도입

pubspec.yaml 파일 설정

스플래시 화면 만들기

1. flutter_native_splash 도입

원래 스플래시 화면이란?

앱을 시작하면 시작 화면을 표시하는 데 약간의 시간이 걸립니다.
그 시작 화면이 표시되기까지의 시간에 표시되는 화면이 스플래시 화면입니다.
기본값은 로드하는 동안 흰색 배경, 즉 흰색 스플래시 화면을 표시합니다.
Flutter제 앱의 구현에서는, 스플래시 화면을 만드는 수단의 하나로서,
flutter_native_splash 패키지가 있습니다.
매우 간단하게 구현할 수 있었으므로, 추천입니다.
패키지를 사용하지 않아도 스플래시 화면을 만들 수 있는 것 같습니다.

flutter_native_splash를 도입한다.

pubspec.yaml

dependencies:
  flutter_native_splash: ^1.1.5+1

pubspec.yaml 파일의 dependencies에 작성한 후,
pub get을 수행하는 것을 잊지 마십시오.
이것으로 배포가 완료됩니다.

2. pubspec.yaml 파일 설정

이 패키지는 dart 파일로 가져오지 않고도 사용할 수 있습니다.
가져오기 대신 pubspec.yaml 파일에 설정을 작성해야 합니다.
이미지와 배경색을 설정합니다.

pubspec.yaml

～～～～～～
dependencies:
  flutter_native_splash: ^1.1.5+1

flutter_native_splash: //インデント注意
  image: "images/splash.png"  //表示したい画像
  color: "FAF3F3"  //背景色、カラーコードで指定

dev_dependencies:
  flutter_test:
    sdk: flutter

～～～～～～

이것으로 설정이 완료됩니다.

3. 스플래시 화면 만들기

마지막으로 flutter 명령을 사용하여 설정한 내용으로 스플래시 화면을 만듭니다.

$ flutter pub run flutter_native_splash:create

이것으로 만들 수 있었습니다, 동작 확인해 봅시다.



이제 스플래시 화면을 구현할 수 있었습니다.