Flutter에서 스플래시 화면을 설정하는 방법을 설명드리겠습니다. 스플래시 화면은 앱이 시작될 때 잠시 표시되는 화면으로, 로고나 로딩 애니메이션 등을 보여주기 위해 사용됩니다. 아래에는 Android와 iOS에서 스플래시 화면을 설정하는 방법을 설명합니다.
Android 스플래시 화면 설정
- 이미지 준비
- 스플래시 화면에 사용할 이미지를 준비합니다. 이 이미지는
res/drawable폴더에 저장됩니다.
- res/drawable/launch_background.xml 파일 생성
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="@android:color/white" />
<item>
<bitmap
android:gravity="center"
android:src="@drawable/splash_image" />
</item>
</layer-list>여기서 splash_image는 스플래시 화면에 사용할 이미지의 이름입니다.
- AndroidManifest.xml 수정
android/app/src/main/AndroidManifest.xml파일을 열고<activity>태그 내에 다음 속성을 추가합니다.
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
...
</activity>- styles.xml 수정
android/app/src/main/res/values/styles.xml파일을 열고 다음 스타일을 추가합니다.
<style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/launch_background</item>
</style>iOS 스플래시 화면 설정
- 이미지 준비
- 스플래시 화면에 사용할 이미지를 준비합니다.
- LaunchScreen.storyboard 수정
- Xcode에서
ios/Runner.xcworkspace파일을 엽니다. Runner프로젝트 내에서Runner/LaunchScreen.storyboard파일을 엽니다.- 스토리보드에 UIImageView를 추가하고, 준비한 이미지를 설정합니다. 이미지를 중앙에 배치하고 레이아웃 제약 조건을 설정하여 모든 화면 크기에 맞도록 합니다.
- Info.plist 수정
Info.plist파일을 열고,UILaunchStoryboardName키가LaunchScreen으로 설정되어 있는지 확인합니다.
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>Flutter에서 기본 스플래시 화면 설정
Flutter 플러그인을 사용하여 기본 스플래시 화면을 설정할 수도 있습니다. flutter_native_splash 플러그인을 사용하면 간단하게 설정할 수 있습니다.
- 플러그인 추가
pubspec.yaml파일에flutter_native_splash플러그인을 추가합니다.
dev_dependencies:
flutter_native_splash: ^2.0.5
flutter_native_splash:
color: "#ffffff"
image: assets/splash_image.png
android: true
ios: true- 플러그인 실행
- 다음 명령어를 실행하여 스플래시 화면을 생성합니다.
flutter pub run flutter_native_splash:create위 과정을 통해 Android와 iOS에서 스플래시 화면을 설정할 수 있습니다. 각 플랫폼의 요구 사항에 맞게 이미지를 준비하고 설정을 수정하여 원하는 스플래시 화면을 구현할 수 있습니다.
뤼튼 사용하러 가기 > https://agent.wrtn.ai/5xb91l