Una pantalla de inicio (splash screen) es una imagen o animación que se muestra durante el tiempo de inicio de una aplicación. Se utiliza para proporcionar una experiencia de usuario más atractiva y fluida, y para ocultar el tiempo de carga de la aplicación. Las pantallas de inicio suelen mostrar el logotipo de la aplicación, el nombre de la aplicación y una breve descripción de la aplicación. También pueden mostrar mensajes de bienvenida o información sobre la aplicación.
Las pantallas de inicio son una parte importante de la experiencia de usuario de una aplicación. Pueden ayudar a crear una primera impresión positiva en los usuarios, y pueden ayudar a los usuarios a entender el propósito de la aplicación. También pueden ayudar a ocultar el tiempo de carga de la aplicación, lo que puede mejorar la experiencia de usuario general.
Dado que es algo que vemos en todas las aplicaciones móviles es un punto importante a tratar.
En este capítulo analizaremos como podemos implementar de forma sencilla un splash screen.
Así es, las pantallas de inicio son una configuración nativa lo que indica que debemos modificar nuestro contenido en las carpetas iOS y android. Para ello podemos seguir la guía que nos dan cada uno de los entornos para implementar el splash por ejemplo en iOS puedes seguir la guía suministrada por el equipo de apple (enlace). Y android puedes seguir la guía suministrada por el equipo de Google (enlace).
De seguro te estas preguntando, ¿No existirá un librería que centralice la solución a este problema? Sobre todo que Flutter es compatible con web y escritorio. Para nuestra fortuna si existe una solución mediante librerías que simplifica la implementación de un Splash Screen.
Esta librería hace parte de los paquetes catalogados como Flutter Favoritos, su configuración es bastante sencilla y es compatible con las plataformas web y mobile. Su funcionalidad es simplificarnos el proceso de creación de nuestras pantallas de inicio.
Para instalarlo basta con ejecutar en una terminal alojada en la ruta principal de nuestro proyecto el siguiente comando:
flutter pub add flutter_native_splash
Esto adicionará a nuestras dependencias la librería en su versión más reciente:
dependencies:
flutter_native_splash: ^2.3.1
Para realizar la configuración basta con crear un archivo llamado flutter_native_splash.yaml, esto nos permite configurar el splash para los diferentes entornos. El archivo debe estar creado en la ruta raíz del proyecto:
El contenido para nuestro caso es el siguiente:
flutter_native_splash:
color: "#3561FE"
image: assets/logo.png
color_dark: "#3561FE"
image_dark: assets/logo.png
android_12:
color: "#3561FE"
image: assets/logo_android_splash.png
icon_background_color: "#3561FE"
image_dark: assets/logo_android_splash.png
icon_background_color_dark: "#3561FE"
web: true
Con todo listo solo es ejecutar el siguiente comando:
dart run flutter_native_splash:create