Flutter에서 스플래시 화면(Splash Screen) 만들기

Flutter에서 스플래시 화면(Splash Screen) 만들기

스플래시 화면(Splash Screen)은 앱이 실행될 때 짧은 시간 동안 표시되는 초기 화면입니다. 앱의 브랜드 아이덴티티를 강조하거나 초기 데이터를 로드하기 위한 시간적 여유를 제공하는 데 사용됩니다. 이번 글에서는 Flutter에서 스플래시 화면을 구현하는 다양한 방법과 심화 기법을 소개하겠습니다.

---

1. 기본 스플래시 화면 설정 (플랫폼별)

Flutter 프로젝트 생성 시 기본적으로 플랫폼 네이티브 코드에서 스플래시 화면을 설정할 수 있습니다.

Android

• android/app/src/main/res/drawable/launch_background.xml 파일을 수정하여 스플래시 화면에 사용할 이미지를 지정합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_image" />
    </item>
</layer-list>

• android/app/src/main/res/values/colors.xml에서 배경색을 지정합니다.

<color name="white">#FFFFFF</color>

 

iOS

• Runner/Assets.xcassets/LaunchImage.imageset에 스플래시 이미지를 추가합니다.
• Runner/Info.plist에서 UILaunchScreen 관련 설정을 확인합니다.

---

2. Flutter에서 스플래시 화면 추가

Flutter_native_splash 패키지 활용

Flutter에서 가장 간편하게 스플래시 화면을 설정하는 방법은 flutter_native_splash 패키지를 사용하는 것입니다.

설치

flutter pub add flutter_native_splash

설정 파일 작성 (pubspec.yaml)

flutter_native_splash:
  color: "#ffffff"
  image: assets/splash.png
  android: true
  ios: true
  fullscreen: true

명령어 실행

flutter pub run flutter_native_splash:create

이렇게 설정하면 플랫폼별 네이티브 코드가 자동으로 수정되며 스플래시 화면이 적용됩니다.

---

3. 커스텀 애니메이션 스플래시 화면 만들기

플랫폼 네이티브 스플래시 화면이 끝난 후 Flutter 위젯에서 커스텀 애니메이션 스플래시 화면을 추가로 보여줄 수 있습니다.

구현 예제

import 'package:flutter/material.dart';
import 'dart:async';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3), () {
      Navigator.pushReplacementNamed(context, '/home');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/splash_logo.png', width: 150),
            SizedBox(height: 20),
            CircularProgressIndicator(),
          ],
        ),
      ),
    );
  }
}

설명

• Timer를 사용해 3초 후에 메인 화면으로 이동합니다.
• Navigator.pushReplacementNamed를 통해 스플래시 화면을 제거하고 메인 화면으로 전환합니다.

---

4. 심화 기법: 로딩 및 초기화 처리

스플래시 화면에서 초기 데이터를 로드하거나 사용자 인증 상태를 확인할 수 있습니다.

FutureBuilder를 사용한 초기화

class SplashScreen extends StatelessWidget {
  Future<void> initializeApp() async {
    // 초기 데이터 로드
    await Future.delayed(Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: initializeApp(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        } else {
          return HomePage();
        }
      },
    );
  }
}

Bloc 또는 Riverpod을 통한 상태 관리

스플래시 화면에서 앱 상태 관리를 위해 Bloc이나 Riverpod 패키지를 사용할 수도 있습니다.

---

5. 주의사항

1. 최대한 간결하게: 스플래시 화면은 짧게 유지하는 것이 좋습니다. 과도한 애니메이션은 사용자 경험에 부정적인 영향을 줄 수 있습니다.
2. 플랫폼별 최적화: Android와 iOS에서 스플래시 화면 동작 방식이 다를 수 있으므로 테스트가 필요합니다.
3. 접근성 고려: 배경색 대비와 애니메이션 속도를 고려하여 접근성을 향상시키세요.

---

결론

Flutter에서 스플래시 화면은 앱의 첫인상을 결정짓는 중요한 요소입니다. 네이티브 설정부터 Flutter 위젯을 활용한 커스텀 애니메이션까지 다양한 방법을 활용해 사용자 경험을 향상시킬 수 있습니다. 상황에 맞는 적절한 기법을 선택하여 더욱 완성도 높은 앱을 만들어 보세요.