[Flutter] 앱 로딩화면 구현 flutter_native_splash

스플래시 스크린(이미지 출처: https://brunch.co.kr/@kangsigner/1)

로딩 화면, 종종 "스플래시 스크린" 또는 "부팅 스크린"이라고도 불리는 화면은 앱이 초기화되고 필요한 데이터를 불러올 때까지 사용자에게 보여지는 화면입니다. 로딩 화면의 주요 기능과 목적은 다음과 같습니다.

 

1. 사용자 피드백 제공: 앱이 아직 로딩 중이라는 것을 사용자에게 알려줍니다. 이로 인해 사용자는 앱이 멈춘 것이 아니라 작동 중이라는 것을 인식하게 됩니다.
브랜딩: 로딩 화면은 회사 로고, 앱 로고, 또는 특정 브랜딩 요소를 표시하여 사용자에게 앱의 브랜드를 강화시킬 수 있는 기회를 제공합니다.
2. 데이터 로딩: 앱이 필요로 하는 초기 데이터를 로딩하거나 특정 서비스에 연결하는 동안 로딩 화면이 표시될 수 있습니다.
3. 자원 초기화: 로딩 화면이 표시되는 동안 앱은 백그라운드에서 필요한 자원(데이터베이스 연결, 설정 파일 로딩 등)을 초기화합니다.
4. 애니메이션 및 시각적 효과: 로딩 화면에는 종종 동적인 애니메이션이나 시각적 효과가 포함되어 있어 사용자의 관심을 끌고 기다리는 동안 지루함을 줄여줍니다.

대부분의 모바일 앱 개발 플랫폼과 웹 프레임워크는 로딩 화면을 쉽게 구현할 수 있도록 도구와 API를 제공합니다.

 

Flutter로 앱을 만들어보면서 로딩 화면 구현방법에 대해서 찾아보다가 Flutter 패키지인 'flutter_native_splash'를 사용하면 좋겠다는 생각을 했습니다.

'flutter_native_splash'는 Flutter 패키지로, 네이티브 시작 스크린(splash screen)을 쉽게 생성하고 설정할 수 있게 해줍니다.

 

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

flutter_native_splash | Flutter Package

flutter_native_splash 사용방법

1. 설치: 'pubspec.yaml' 파일에 다음을 추가합니다.

dependencies:
  flutter_native_splash: ^latest_version

2. 설정: 'pubspec.yaml' 파일에 스플래시 화면의 설정을 추가합니다.

flutter_native_splash:
  image: assets/splash.png
  color: "ffffff"

3. 생성: 터미널에서 다음 명령어를 실행하여 스플래시 화면을 생성합니다.

# flutter pub get
flutter pub add flutter_native_splash
flutter pub run flutter_native_splash:create

1) flutter pub get
pubspec.yaml 파일에 명시된 종속성들(dependencies)을 가져오고 설치합니다.
일반적으로 패키지를 pubspec.yaml에 추가한 후에 이 명령어를 실행하여 필요한 패키지들을 로컬 시스템에 설치해야 합니다.
Flutter 프로젝트를 처음 클론하거나 다운로드할 때도 종속성들을 설치하기 위해 이 명령어를 사용합니다.

 

2) flutter pub add flutter_native_splash
Flutter 2.0부터 flutter pub add [package_name]는 특정 패키지를 직접 pubspec.yaml 파일에 추가하는 새로운 방법입니다.
이 명령어는 flutter_native_splash 패키지를 pubspec.yaml 파일에 자동으로 추가해줍니다. 추가된 후에는 바로 flutter pub get을 실행하여 해당 패키지를 설치합니다.

 

3) flutter pub run flutter_native_splash:create
flutter pub run 명령어는 특정 패키지에 포함된 실행 가능한 스크립트를 실행하기 위해 사용됩니다.
flutter_native_splash:create는 flutter_native_splash 패키지에 포함된 스크립트로, 설정에 따라 네이티브 스플래시 화면을 생성합니다. 이 명령어를 실행하기 전에 pubspec.yaml에 스플래시 화면에 대한 설정을 해야 합니다.

 

4) 삭제: 만약 네이티브 스플래시 화면을 삭제하고 싶다면

flutter pub run flutter_native_splash:remove

 

이 패키지는 안드로이드와 iOS에서 모두 동작하며, 앱에 맞게 다양한 설정 옵션을 제공합니다.

'flutter_native_splash'의 문서에서 더 다양한 설정 옵션과 자세한 내용을 확인할 수 있습니다.

flutter_native_splash 적용

mungmungko_logo

만들고 싶은 앱의 로고 이미지를 아래와 같이 적용했습니다.