Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

CÓMO CREAR UNA SPLASH SCREEN EN FLUTTER

November 25, 2025

Introducción a la Splash Screen en Flutter

Una splash screen, o pantalla de inicio, es la primera interfaz que un usuario ve al abrir una aplicación. En Flutter, esta pantalla es crucial para establecer una experiencia de usuario fluida y profesional, mostrando el logotipo de la marca o una animación mientras la aplicación carga sus recursos. Este tutorial explica cómo implementar y personalizar una splash screen en Flutter para Android, iOS y web, con un enfoque actualizado a noviembre de 2025. A través de ejemplos prácticos, se cubrirán métodos nativos y el uso de paquetes como flutter_native_splash, garantizando compatibilidad multiplataforma y un diseño atractivo.

¿Qué es una Splash Screen y su Importancia?

Una splash screen no solo mejora la estética de una aplicación, sino que también proporciona una transición suave mientras se inicializan los recursos. En Flutter, la splash screen predeterminada muestra un fondo blanco con el ícono de Flutter, lo cual no es ideal para aplicaciones profesionales. Personalizar esta pantalla permite reforzar la identidad de marca y captar la atención del usuario desde el primer momento. Además, en plataformas como Android 12 y superiores, la splash screen debe configurarse de manera específica para cumplir con las nuevas directrices de diseño.

Preparación del Entorno de Desarrollo

Antes de comenzar, asegúrate de tener un entorno de desarrollo configurado para Flutter. Necesitarás Flutter SDK (versión 3.38.1 o superior, según las actualizaciones de 2025), Android Studio para emuladores Android, y Xcode para iOS. También es recomendable usar Visual Studio Code o Android Studio como editores, ya que ofrecen herramientas integradas para Flutter. Verifica la instalación ejecutando el siguiente comando en la terminal:

flutter doctor

Este comando comprueba si Flutter, Dart, y las dependencias están correctamente instaladas. Si hay errores, sigue las sugerencias de flutter doctor para resolverlos. Además, crea un proyecto Flutter si no lo has hecho:

flutter create mi_app
cd mi_app

Esto genera la estructura básica de un proyecto Flutter, que servirá como base para los ejemplos.

Estructura de un Proyecto Flutter

Un proyecto Flutter tiene una estructura de directorios estándar. Los archivos clave para la splash screen incluyen:

mi_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── assets/
└── pubspec.yaml
  • android/: Contiene la configuración nativa para Android.
  • ios/: Contiene la configuración nativa para iOS.
  • lib/main.dart: Punto de entrada de la aplicación Flutter.
  • assets/: Carpeta para imágenes y recursos.
  • pubspec.yaml: Archivo de configuración para dependencias y activos.

Asegúrate de que la carpeta assets/ esté declarada en pubspec.yaml:

flutter:
    assets:
        - assets/

Método 1: Personalización Nativa de la Splash Screen

La personalización nativa implica modificar los archivos de configuración de Android y iOS directamente. Este método es ideal para un control preciso sobre la apariencia de la splash screen, especialmente en plataformas específicas.

Configuración en Android

Para Android, la splash screen se define en la carpeta android/app/src/main/res/. Los pasos son:

  1. Agregar la Imagen de la Splash Screen: Coloca tu imagen (por ejemplo, splash.png) en las carpetas de recursos según la densidad de pantalla:
android/app/src/main/res/
├── drawable/
│   └── splash.png
├── drawable-hdpi/
│   └── splash.png
├── drawable-mdpi/
│   └── splash.png
├── drawable-xhdpi/
│   └── splash.png
├── drawable-xxhdpi/
│   └── splash.png
├── drawable-xxxhdpi/
│   └── splash.png

Asegúrate de que las imágenes tengan las dimensiones adecuadas para cada densidad (por ejemplo, 480x800 para mdpi, 720x1280 para hdpi).

  1. Crear el Archivo de Fondo: Define el fondo de la splash screen en 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" />
    </item>
</layer-list>

Este archivo establece un fondo blanco y centra la imagen splash.png.

  1. Configuración para Android 12 y Superior: Desde Android 12, las aplicaciones usan una API de splash screen nativa. Modifica android/app/src/main/res/values/styles.xml:
<resources>
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowSplashScreenBackground">@color/white</item>
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash</item>
        <item name="android:windowSplashScreenAnimationDuration">300</item>
    </style>
</resources>

También, crea android/app/src/main/res/values/colors.xml si no existe:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#FFFFFF</color>
</resources>
  1. Actualizar el Manifest: Asegúrate de que el archivo android/app/src/main/AndroidManifest.xml use el tema correcto:
<application
    android:theme="@style/LaunchTheme">
    <activity
        android:name=".MainActivity"
        android:theme="@style/LaunchTheme">
    </activity>
</application>
  1. Limpiar y Reconstruir: Ejecuta los siguientes comandos para aplicar los cambios:
flutter clean
flutter pub get
flutter run

Configuración en iOS

Para iOS, la splash screen se configura en Xcode, dentro de la carpeta ios/Runner/. Sigue estos pasos:

  1. Abrir el Proyecto en Xcode: Abre ios/Runner.xcworkspace en Xcode.

  2. Configurar la Launch Screen: En el panel de navegación, selecciona Assets.xcassets y luego LaunchImage. Reemplaza las imágenes predeterminadas (LaunchImage.png, [email protected], [email protected]) con tu imagen de splash screen en las resoluciones correspondientes (1x: 320x480, 2x: 640x960, 3x: 960x1440).

  3. Modificar el Launch Screen: Ve a Base.lproj/LaunchScreen.storyboard. Ajusta la vista para que la imagen se muestre correctamente, asegurándote de que esté centrada y escale adecuadamente.

  4. Reconstruir la Aplicación: Ejecuta el proyecto desde Xcode o usa:

flutter run

Configuración para Web

Para aplicaciones web en Flutter, la splash screen se maneja en el archivo web/index.html. Modifica el archivo para incluir una imagen o animación personalizada:

<!DOCTYPE html>
<html>
    <head>
        <title>Mi App</title>
        <style>
            body {
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #ffffff;
            }
            .splash {
                max-width: 100%;
                max-height: 100%;
            }
        </style>
    </head>
    <body>
        <img src="assets/splash.png" class="splash" alt="Splash Screen" />
        <script src="main.dart.js" type="application/javascript"></script>
    </body>
</html>

Asegúrate de que splash.png esté en web/assets/ y declarada en pubspec.yaml. Este enfoque muestra la imagen hasta que la aplicación web se carga completamente.

Método 2: Uso del Paquete flutter_native_splash

El paquete flutter_native_splash simplifica la creación de splash screens al generar automáticamente el código nativo para Android, iOS y web. Es ideal para desarrolladores que buscan una solución rápida y personalización eficiente.

Instalación del Paquete

Agrega el paquete como dependencia en pubspec.yaml:

dependencies:
    flutter_native_splash: ^2.4.6

Ejecuta:

flutter pub get

Configuración del Paquete

Crea un archivo flutter_native_splash.yaml en la raíz del proyecto o agrega la configuración directamente en pubspec.yaml. Un ejemplo de configuración:

flutter_native_splash:
    color: "#ffffff"
    image: assets/splash.png
    android: true
    ios: true
    web: true
    fullscreen: true
    android_12:
        image: assets/splash.png
        color: "#ffffff"
  • color: Color de fondo en hexadecimal.
  • image: Ruta de la imagen de la splash screen.
  • android, ios, web: Habilita o deshabilita la generación para cada plataforma.
  • fullscreen: Oculta la barra de notificaciones en Android.
  • android_12: Configuración específica para Android 12 y superior.

Generar la Splash Screen

Ejecuta el siguiente comando para generar los archivos nativos:

dart run flutter_native_splash:create

Si usas un archivo personalizado, especifica la ruta:

dart run flutter_native_splash:create -p flutter_native_splash.yaml

Limpiar y Probar

Limpia el proyecto y prueba la aplicación:

flutter clean
flutter pub get
flutter run

El paquete actualiza automáticamente los archivos nativos, asegurando una splash screen consistente en todas las plataformas.

Personalización Avanzada con Animaciones

Para una experiencia más dinámica, puedes agregar animaciones a la splash screen usando Flutter. Esto implica crear una pantalla inicial en Dart que se muestre antes de la pantalla principal.

Crear una Splash Screen Animada

Modifica lib/main.dart para incluir una pantalla de inicio animada:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mi App',
      home: const SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _controller.forward();
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => const HomeScreen()),
        );
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Image.asset('assets/splash.png'),
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Inicio')),
      body: const Center(child: Text('Bienvenido a la App')),
    );
  }
}

Este código crea una splash screen que muestra una imagen con una animación de desvanecimiento durante tres segundos antes de pasar a la pantalla principal.

Agregar Paquetes de Animación

Para animaciones más complejas, considera usar paquetes como flutter_animate. Instálalo en pubspec.yaml:

dependencies:
    flutter_animate: ^4.5.0

Ejemplo de uso:

import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const HomeScreen()),
      );
    });

    return Scaffold(
      body: Center(
        child: Image.asset('assets/splash.png')
            .animate()
            .fadeIn(duration: 2000.ms)
            .scale(delay: 500.ms),
      ),
    );
  }
}

Este código aplica una animación de desvanecimiento y escalado a la imagen.

Buenas Prácticas para Splash Screens

  • Duración Adecuada: Mantén la splash screen visible entre 2 y 5 segundos para evitar frustrar al usuario.
  • Optimización de Imágenes: Usa imágenes comprimidas (PNG o JPEG) para reducir el tiempo de carga.
  • Consistencia de Marca: Asegúrate de que los colores y el logotipo reflejen la identidad de la aplicación.
  • Pruebas Multiplataforma: Verifica la apariencia en diferentes dispositivos y sistemas operativos.
  • Evitar Excesos: Las animaciones deben ser sutiles para no sobrecargar la experiencia.

Solución de Problemas Comunes

  • Splash Screen No Se Muestra: Asegúrate de que las imágenes estén en las carpetas correctas y declaradas en pubspec.yaml. Ejecuta flutter clean y reconstruye.
  • Fondo Blanco Persistente: Verifica que el color de fondo en los archivos nativos coincida con el diseño.
  • Errores en Android 12: Configura la sección android_12 en flutter_native_splash.yaml.
  • Tiempo de Carga Excesivo: Optimiza las imágenes y reduce la duración de las animaciones.

Conclusiones

Implementar una splash screen en Flutter es un proceso accesible que mejora significativamente la primera impresión de una aplicación. Ya sea a través de la personalización nativa o el uso de paquetes como flutter_native_splash, los desarrolladores pueden crear experiencias visuales atractivas y consistentes en Android, iOS y web. Las animaciones añaden un toque dinámico, pero deben usarse con moderación para no afectar el rendimiento. Con las herramientas y técnicas descritas, cualquier desarrollador puede personalizar una splash screen que refuerce la identidad de marca y optimice la experiencia del usuario. Experimenta con los ejemplos proporcionados y adapta las configuraciones a las necesidades específicas de tu proyecto.