Flutter: Android 12 API를 사용하여 애니메이션 스플래시 화면 만들기(Android 전용)

안녕 얘들아, Google이 유용한 라이브러리를 많이 공개하고 있다는 것을 우리 모두 알고 있다.
Google은 Android 12 이상용 스플래시 화면 라이브러리의 베타 버전을 출시했습니다.

자세한 내용은 여기를 클릭하세요:

https://developer.android.com/guide/topics/ui/splash-screen

그러나 슬프게도 Android에서 기본적으로 Animated splash screen을 활성화하는 flutter용 패키지가 없습니다.

Lets Start....

먼저 새 Flutter 프로젝트를 만들거나 기존 프로젝트에서 계속할 수 있습니다.

Android 폴더를 열고 android/app/src/main/res/drawable/launch_background.xml로 이동하여 "open for edit in android studio"를 클릭합니다.

참고: 드로어블 콘텐츠 보기에 Android 스튜디오가 선호되거나 코딩할 수도 있지만 드로어블을 볼 수는 없습니다.

이제 Build.gradle(Module:android.app) 파일을 열고 다음 줄을 추가합니다.

dependencies {
..............
    implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.4'
.............
}

이제/values/splash.xml에 새 파일을 만듭니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@android:color/background_dark</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/animator</item>
        <item name="android:windowSplashScreenBrandingImage">@drawable/branding_centered</item>
        <item name="postSplashScreenTheme">@style/LaunchTheme</item>
        <item name="windowSplashScreenAnimationDuration">2147483647</item>
    </style>
</resources>

오류에 대해 걱정하지 마십시오. 먼저 이 줄의 의미가 무엇인지 이해합시다.

• style name="Theme.App.Starting" : is name of theme and it will be use in app and called as soon as app starts.
• item name="windowSplashScreenBackground": to fill the background with a specific single color
• item name="windowSplashScreenAnimatedIcon": to show animated vector or some drawable on screen.
• item name="android:windowSplashScreenBrandingImage": to show branding image. Note this is only available for android api -V31 or higher.

• item name="postSplashScreenTheme": After splash Theme which theme should be called that specify it. We will use flutter LaunchTheme

• item name="windowSplashScreenAnimationDuration":Specify Duration of animation.

이 튜토리얼에서는 간단한 애니메이션 목록 애니메이션을 사용할 것입니다. 즉, 이미지에 대해 지정된 지속 시간으로 일부 이미지를 시퀀스로 표시한다는 의미입니다.

여기에서 이미지를 다운로드할 수 있습니다.

리소스 관리자를 사용하여 이 두 이미지를 드로어블에 추가합니다.

drawable 폴더에 다음 코드 줄에 새 파일 animator.xml을 만듭니다.

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"
    >
    <item android:drawable="@drawable/android_12" android:duration="600" />
    <item android:drawable="@drawable/googlelogo" android:duration="600" />
</animation-list>

이제 브랜딩 이미지를 만들고 *"ic_android_black_24dp.xml"*(물론 원하는 대로 변경할 수 있음)이라는 드로어블에 새 파일을 만들고 다음 줄을 만듭니다.

<vector android:height="50dp" android:tint="#4184C5"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="50dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
   <group
       android:name="BrandingGroup"
       android:pivotX="16"
       android:pivotY="16.5"
       android:scaleY="1"
       android:scaleX="1">
       <path android:fillColor="#FF000000"
           android:pathData="M17.6,11.48 L19.44,8.3a0.63,0.63 0,0 0,-1.09 -0.63l-1.88,3.24a11.43,11.43 0,0 0,-8.94 0L5.65,7.67a0.63,0.63 0,0 0,-1.09 0.63L6.4,11.48A10.81,10.81 0,0 0,1 20L23,20A10.81,10.81 0,0 0,17.6 11.48ZM7,17.25A1.25,1.25 0,1 1,8.25 16,1.25 1.25,0 0,1 7,17.25ZM17,17.25A1.25,1.25 0,1 1,18.25 16,1.25 1.25,0 0,1 17,17.25Z"/>
   </group>
</vector>

이제 브랜딩 이미지를 중앙에 배치해야 하므로 "branding_centered.xml"이라는 드로어블에 새 파일을 만들고 다음 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_android_black_24dp"

        android:gravity="center" />
</layer-list>

이제 AndroidManifest.xml을 편집하고 android:theme를 android:theme="@style/Theme.App.Starting"으로 변경해 보겠습니다.

<activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
          android:theme="@style/Theme.App.Starting"
  </activity>

** MainActiviy.kt** 파일을 열고 다음 줄을 추가합니다.

 private var keepSplashOnScreen = true
    private val delay by lazy { 10000L }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Handle the splash screen transition.
        val splashScreen = installSplashScreen()
        splashScreen.setKeepOnScreenCondition   { keepSplashOnScreen }
        Handler(Looper.getMainLooper()).postDelayed({keepSplashOnScreen=false},delay)

    }

이 코드에서 먼저 지속 시간 동안 스플래시 화면을 유지하려는 기간(ms)입니다.

setKeepOnScreenCondition(), 스플래시 화면을 유지하고 지연된 후 스플래시 화면이 제거됩니다.

참고: 빌드 후 앱이 자동으로 실행되면 스플래시 화면이 표시되지 않습니다. 이 경우 앱을 종료하고 수동으로 앱을 다시 실행하면 됩니다.

그리고 마지막으로 출력

YouTube, Gmail 등과 같은 사용자 지정 애니메이션을 위한 고유한 애니메이션 벡터를 만들 수 있습니다.

사용자 지정 애니메이션 벡터에 대한 자세한 내용은 다음을 참조하세요.
https://medium.com/mobile-app-development-publication/create-your-own-animated-vector-drawable-on-android-app-3f8fa9bb08c3

If you facing some issue then you can refer to my GitHub repository
https://github.com/Djsmk123/fluterAndroid12splashScreen/