Flutter: ¿Cómo hacemos un splashscreen?

En los artículos anteriores les he comentado muchos elementos teóricos de Flutter y sobre su lenguaje de programación Dart, aunque quedan muchos elementos que estudiar, los vamos a ir viendo con ejemplos de código. Hoy les traigo una alternativa para implementar un splashscreen para que nuestras aplicaciones se vean más vistosas, aunque lo pueden hacer de multiples formas gracias a la flexibilidad que brinda Flutter, hoy les mostraré una forma sencilla a través de un paquete.

Importando la dependencia

Una de las formas (a mi entender la más sencilla) para implementar un splashscreen vistoso es a partir del paquete “splashscreen”, pero requiere que lo instalemos de internet, para hacer esto, primeramente buscamos la versión más reciente en el sitio de dependencias de fluter pub.dev (en el momento de este artículo se trabajó con la versión más reciente 1.2.0) y en la pestaña “Installing” nos informa la versión a utilizar. Lo copiamos y lo pegamos en el archivo de configuración del proyecto pubspec.yaml en la sección de las dependencias de producción.

dependencies:
  flutter:
    sdk: flutter
  splashscreen: ^1.2.0

Deben fijarse que se adiciona a un nivel con respecto a “dependencies” como exige el formato de archivo yaml.

Una vez guardado el archivo, pueden descargar la dependencia presionando el enlace “Pug get” desde el mismo editor de Android Studio (este y otros enlaces relacionados con el manejo de dependencias están justamente en una barra arriba cuando abren el archivo de configuración pubspec.yaml alineados a la derecha), lo pueden hacer desde la terminal y estando en la ruta del proyecto con el comando “flutter pub get” o simplemente correr el proyecto y si no está la dependencia, como primera acción la descargará.

Escribiendo el código

Veámos como quedaría el archivo starter main.dart para este escenario:

import 'package:flutter/material.dart';
import 'package:splashscreen1/ui/splashscreen.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SplashScreen en Flutter',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SplashScreenPage(),
    );
  }
}

Como pueden ver, estamos importando otro archivo dart, el cual tiene el widget que llamaremos y que nos mostrará el splashscreen. Ahora veamos el archivo splashscreen.dart (como pueden ver este archivo se encuentra en un directorio llamado “ui”, es útil utilizar carpetas para organizar nuestro código)

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:splashscreen1/ui/home.dart';
class SplashScreenPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      image: new Image.asset('assets/images/flutter-logo.png'),
      gradientBackground: new LinearGradient(colors: [Colors.white, Colors.indigoAccent], begin: Alignment.topCenter, end: Alignment.bottomCenter),
      backgroundColor: Colors.white,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 60.0,
      loaderColor: Colors.white,
      loadingText: Text("Cargando ...", style: TextStyle(color: Colors.white),),
    );
  }
}

Veámos algunos elementos de este archivo:

Línea 1: Importamos en paquete de material

Línea 2: Importamos el paquete splashscreen de la biblioteca externa que instalamos desde el repositorio pub.dev.

Línea 3: Importamos el archivo home.dart, que es donde debe iniciar nuestra aplicación una vez termime el splashscreen.

Línea 5: Creamos nuestro widget sin mantenimiento de estado.

Línea 7: Reimplementación del método de compilación en cargado de construir la interfaz del splashscreen.

Línea 8: Retorno del widget encargado de construir el splashscreen.

Línea 9-17: Propiedades del widget:

seconds: Tiempo que debe durar el splashscreen.
navigateAfterSeconds: Widget que debe mostrarse una vez concluido ese tiempo (en este caso el widget HomePage).
image: Imagen a mostrar, normalmente logo de la aplicación.
gradientBackground: Si desea que el splashscreen tenga un gradiente de colores.
backgroundColor: Color de fondo si no usa gradiente.
styleTextUnderTheLoader: Estilos aplicados al texto que se encuentra debajo de la animación de cargando.
photoSize: Tamaño de la imagen.
loaderColor: Color de la animación de cargando.
loadingText: Texto debajo de la animación de cargando.

Por último la simple vista del home:

import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
  HomePage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Center(
          child:
          Text(
            'Este es el home',
          )
      ),
    );
  }
}

Ahora veremos como se vé: