플러터 스플래시 스크린 만들기 – Flutter Navive Splash

by

안녕하세요, 이번 글에서는 여러분께 Flutter Native Splash를 사용하여 Flutter 애플리케이션에 스플래시 스크린을 추가하는 방법에 대해 알아보겠습니다.

Flutter Native Splash란?

Flutter Native Splash는 Flutter 애플리케이션에 네이티브 스플래시 스크린을 손쉽게 추가하기 위한 패키지입니다. 이 패키지를 사용하면, 사용자에게 앱이 로딩 중임을 알려주는 스플래시 화면을 간편하게 구현할 수 있습니다.

설치 및 설정

스플래시 스크린을 사용하기 위해서는 먼저 flutter_native_splash 패키지를 프로젝트에 추가해야 합니다.

flutter pub add flutter_native_splash

이제, main 함수에서 파일을 열어 아래와 같이 코드를 추가하여 스플래시 화면을 표시합니다.

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

그리고 시작화면에서 initState가 호출되면서 화면이 제거되도록 설정합니다.

class _MyHomePageState extends State<MyHomePage> { 
  @override
  void initState() {
    super.initState();
    FlutterNativeSplash.remove();
  }
...

pubspec.ymal파일에서 아래 설정을 추가합니다. 스플래시 화면의 배경색을 설정하고 화면에 표시할 이미지를 지정합니다. 그리고 안드로이드, iOS 각 플랫폼에 대해 스플래시 화면을 활성화 합니다.

스플래시-스크린-이미지
flutter_native_splash:
  color: "#ffffff"
  image: assets/splash.png
  android: true
  ios: true

스플래시 화면 생성 및 제거

설정 파일을 작성한 후, 아래 명령어를 사용하여 스플래시 화면을 생성합니다

flutter pub run flutter_native_splash:create

만약 스플래시 화면 설정을 제거하기 위해서는 다음 명령어를 사용합니다

flutter pub run flutter_native_splash:remove

설정을 제거해도 반영이 안된다면 디바이스를 초기화합니다.

Leave a Comment