Flutter의 Splash Screen 만들기

앱을 실행할 때 가장 먼저 사용자가 보게 되는 화면은 스플래시 화면(Splash Screen)입니다. 스플래시 화면은 앱의 로고나 브랜드 이미지를 표시하여 사용자에게 앱이 로드되고 있음을 알리는 역할을 합니다. 이번 글에서는 Flutter에서 스플래시 화면을 만드는 방법과 이를 커스터마이징하는 예제를 자세히 살펴보겠습니다.

1. 기본 스플래시 화면 설정

Flutter에서는 기본적으로 스플래시 화면을 설정하기 위해 네이티브 설정 파일을 수정해야 합니다. 다음은 Android와 iOS에서 기본 스플래시 화면을 설정하는 방법입니다.

Android 스플래시 화면 설정

• android/app/src/main/res/drawable 폴더에 launch_background.xml 파일을 생성합니다.

<!-- res/drawable/launch_background.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_image" />
    </item>
</layer-list>

 

• android/app/src/main/res/drawable 폴더에 launch_image.png 파일을 추가합니다.
• android/app/src/main/AndroidManifest.xml 파일을 열고 application 태그 안에 다음 코드를 추가합니다.

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|screenSize|smallestScreenSize"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <meta-data
        android:name="io.flutter.embedding.android.NormalTheme"
        android:resource="@style/NormalTheme"
    />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

 

iOS 스플래시 화면 설정

• ios/Runner/Assets.xcassets 폴더에 LaunchImage 이미지를 추가합니다.
• ios/Runner/Info.plist 파일을 열고 다음 코드를 추가합니다.

<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>

 

• ios/Runner 폴더에 LaunchScreen.storyboard 파일을 생성하고, Interface Builder를 사용하여 스플래시 화면 디자인을 추가합니다.

2. Flutter 스플래시 화면 구현

Flutter 코드에서 스플래시 화면을 구현하려면, flutter_native_splash 패키지를 사용하여 더 간편하게 설정할 수 있습니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^1.2.0

 

그리고 flutter_native_splash 패키지를 설정합니다.

• pubspec.yaml 파일에 설정을 추가합니다.

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

 

• pub get 명령어를 실행하고, flutter pub run flutter_native_splash:create 명령어를 실행하여 스플래시 화면을 생성합니다.

 

 

반응형

 

 

 

3. 커스텀 스플래시 화면 구현

Flutter 코드에서 커스텀 스플래시 화면을 구현하여 애니메이션이나 추가 로직을 추가할 수 있습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3), () {
      Navigator.of(context).pushReplacement(MaterialPageRoute(
        builder: (context) => HomeScreen(),
      ));
    });
  }

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

 

 

위 코드는 스플래시 화면을 Flutter 위젯으로 구현한 예제입니다. 앱이 실행되면 3초 동안 스플래시 화면이 표시되고, 이후에 메인 화면으로 전환됩니다. 스플래시 화면에는 로고 이미지와 로딩 인디케이터가 포함되어 있습니다.

결론

Flutter에서 스플래시 화면을 구현하면 앱의 첫 인상을 더욱 좋게 만들 수 있습니다. 네이티브 설정을 통해 기본 스플래시 화면을 설정하고, Flutter 위젯을 사용하여 커스텀 스플래시 화면을 구현할 수 있습니다. flutter_native_splash 패키지를 사용하면 간편하게 스플래시 화면을 설정할 수 있으며, 다양한 커스터마이징 옵션을 통해 사용자 경험을 향상시킬 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매력적이고 기능적인 스플래시 화면을 구현해보세요.