Forma CORRECTA🥇 de hacer un SplashScreen en Flutter (✅ 100% explicado)

En este artículo vamos a ver la forma correcta de implementar un splashscreen en una aplicación de hecha en Flutter. Vamos a explicar paso a paso para que sea sencillo de implementar y que cualquiera pueda hacerlo aunque no sean un experto en desarrollo móvil, solo necesitas conceptos básicos de programación.

También es importante apuntar que la mayoría del código es nativo de Android, pero no te preocupes, son un par de líneas y vamos a explicarlo todo. Esta es la forma correcta de hacer el splashscreen, sin embargo existe otra forma de hacerlo en el que no tienes que tocar código nativo, sin embargo es una forma FAKE de hacerlo.

Este paquete funciona a través de un Widget que se ejecuta hasta después de que la aplicación ha iniciado, por lo que no es un splashscreen, simplemente es una página que se muestra al principio de la aplicación, luego hace un Future.delay para realizar un espera y luego cargar otra página. Esta no es una forma correcta de hacerlo, pero lo cierto es que si es más fácil, si quieres verlo puedes visitar este enlace.

¿Qué es un SplashScreen?

Cuando abrimos una aplicación en nuestro móvil, siempre hay unos segundos antes de que la aplicación cargue completamente. Durante estos segundos, de forma predeterminada en Flutter, se muestra una pantalla blanca, pero podemos editar esto realizando unos pequeños cambios en el código de la carpeta Android.

El SplashScreen es normalmente usado para colocar el logo de la aplicación, en ocasione también va acompañado por una pequeña animación, pero en este ejemplo usaremos una imagen estática para facilitar el entendimiento. Toda aplicación debe tener un splashscreen de acorde a su diseño y debe ser planteado desde el principio.

Proceso para crear un SplashScreen

1- Vamos a la carpeta Android -> apps -> src -> main -> res, aquí encontraremos las carpetas en las que vamos a trabajar.

2- Lo primero que haremos será crear un archivo dentro de la carpeta values. Dentro de values vamos a crear un archivo llamado color.xml donde vamos a definir el color que tendrá nuestro splashscreen, vamos a escribir el siguiente código dentro de el:

<!-- color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#0B5DAE</color>
</resources>

3- Luego dentro de la carpeta drawable y también dentro de la carpeta drawable-v21 vamos a crear un archivo llamado bg_color.xml y vamos a escribir el siguiente código.

<!-- bg_color.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

          <solid android:color="@color/primary" />

</shape>

4- Ahora tenemos que modificar el archivo launch_background.xml y vamos realizar un pequeño cambio en la línea <item android:drawable=»@android:color/white» /> y lo reemplazamos por <item android:drawable=»@drawable/bg_color» />. El archivo debe quedar así:

<!-- launch_background.xml -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_color" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch" />
    </item> -->
</layer-list>

5- Ahora tenemos que colocar la imagen de nuestra aplicación, tenemos que copiar la imagen (de preferencia en formato png y con transparencia). Tenemos que copiar la imagen dentro de las carpetas que comienzan con mipmap.

6. El texto que <item> que está comentado en el archivo launch_background.xml vamos a descomentarlo. También vamos a cambiar la propiedad android:src de la etiqueta bitmap, pondremos el nombre que tenga el archivo de nuestra imagen. Debe quedar más o menos así:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_color" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/splash" />
    </item>
</layer-list>

7- Para terminar no olvides modificar también el archivo launch_background.xml de la carpeta drawable-v21. Una vez que tengas varios archivos modificados, corremos nuestra aplicación y listo.

¿Cómo hacerlo en iOS?

Este tutorial explica la forma de hacer el splashscreen en Android, la forma de hacerlo para iOS es mucho más sencilla, solo tenemos que abrir nuestro proyecto en XCode y buscar el archivo splashscreen y escoger una imagen con el editor. Y listo.

Es muy sencillo así que no lo agregué al vídeo, además necesito una macbook para hacerlo y al ser un niño pobre del tercer mundo no tengo una macbook decente.

En conclusión

Hacer un splashscreen es importante para cualquier aplicación y para hacerlo debes tocar un poco de código nativo, pero es muy fácil de hacerlo. Y mucho más fácil es hacerlo en iOS.

Eso es todo por el momento, espero que les haya gustado, pero sobre todo espero que les haya servido. Si tienes alguna duda puedes dejarlo en los comentarios y con gusto estaré contestando. Sin más que decir, nos leemos en el siguiente código.

Seguir leyendo: