Añadir una pantalla de inicio (splash screen) a tu aplicación de Android

Una pantalla de inicio (también conocida como pantalla de lanzamiento) proporciona a una experiencia inicial sencilla mientras se carga tu aplicación de Android. Prepara el escenario para tu aplicación, a la vez que da tiempo para que se cargue el motor de la aplicación y se inicialice tu aplicación.

Tienes un par de opciones para implementar una pantalla de inicio:

1. Puedes usar uno de los paquetes disponibles en pub.dev.

2. Puedes implementarla manualmente, como se muestra en la aplicación de ejemplo de pantalla de inicio. El resto de esta página asume el enfoque manual.

Cada aplicación de Android requiere tiempo de inicialización mientras el sistema operativo configura el proceso de la aplicación. Android proporciona el concepto de una pantalla de lanzamiento para mostrar un Drawable mientras la aplicación se está inicializando.

Un Drawable es un gráfico de Android. Para aprender cómo añadir un Drawable a tu proyecto de Flutter en Android Studio, consulta Importar drawables a tu proyecto en la documentación para desarrolladores de Android.

La plantilla de proyecto de Flutter predeterminada incluye una definición de un tema de lanzamiento y un fondo de lanzamiento. Puedes personalizar esto editando styles.xml, donde puedes definir un tema cuyo windowBackground esté establecido en el Drawable que debería mostrarse como la pantalla de lanzamiento.

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

Además, styles.xml define un tema normal para aplicarse a FlutterActivity después de que la pantalla de lanzamiento desaparezca. El fondo del tema normal solo se muestra por un momento muy breve después de que la pantalla de inicio desaparece, y durante el cambio de orientación y la restauración de la Activity. Por lo tanto, se recomienda que el tema normal use un color de fondo sólido que se parezca al color de fondo principal de la UI de Flutter.

<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/normal_background</item>
</style>

En AndroidManifest.xml, establece el theme de FlutterActivity al tema de lanzamiento. Luego, añade un elemento de metadatos a la FlutterActivity deseada para indicarle a Flutter que cambie del tema de lanzamiento al tema normal en el momento adecuado.

<activity
    android:name=".MyActivity"
    android:theme="@style/LaunchTheme"
    // ...
    >
    <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>

La aplicación de Android ahora muestra la pantalla de lanzamiento deseada mientras la aplicación se inicializa.

Android 12 introdujo la API SplashScreen. Usa la API SplashScreen en tu archivo styles.xml. Por ejemplo:

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowSplashScreenBackground">@color/bgColor</item>
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/launch_background</item>
</style>

Es posible que algunas aplicaciones quieran continuar mostrando el último cuadro (frame) de la pantalla de lanzamiento de Android en Flutter. Por ejemplo, esto preserva la ilusión de un solo cuadro mientras continúa la carga adicional en Dart. Para lograr esto, las siguientes APIs de Android pueden ser útiles:

import android.os.Build
import android.os.Bundle
import androidx.core.view.WindowCompat
import io.flutter.embedding.android.FlutterActivity
​
class MainActivity : FlutterActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    // Aligns the Flutter view vertically with the window.
    WindowCompat.setDecorFitsSystemWindows(getWindow(), false)
​
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
      // Disable the Android splash screen fade out animation to avoid
      // a flicker before the similar frame is drawn in Flutter.
      splashScreen.setOnExitAnimationListener { splashScreenView -> splashScreenView.remove() }
    }
​
    super.onCreate(savedInstanceState)
  }
}

import android.os.Build;
import android.os.Bundle;
import android.window.SplashScreenView;
import androidx.core.view.WindowCompat;
import io.flutter.embedding.android.FlutterActivity;
​
public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Aligns the Flutter view vertically with the window.
        WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
​
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            // Disable the Android splash screen fade out animation to avoid
            // a flicker before the similar frame is drawn in Flutter.
            getSplashScreen()
                .setOnExitAnimationListener(
                    (SplashScreenView splashScreenView) -> {
                        splashScreenView.remove();
                    });
        }
​
        super.onCreate(savedInstanceState);
    }
}

Luego, puedes volver a implementar el primer cuadro en Flutter que muestre elementos de tu pantalla de lanzamiento de Android en las mismas posiciones en la pantalla. Para ver un ejemplo de esto, consulta la aplicación de ejemplo de pantalla de inicio.