Personaliza el intro de tu aplicación Flutter

Hola Programador... Si eres de los que se la pasa viendo y descargando app para tener ideas y así aplicarlas a sus desarrollos, te tengo una buena noticia, hoy te voy a enseñar a personalizar el intro a tu aplicación Flutter. 

Lo primero que vamos hacer es crearnos un archivo (en mi caso lo cree dentro de la carpeta page que cree dentro de lib para tener todo un poco más organizado) y lo llamamos splash.dart (o bueno el nombre que tu quieras intro.dart, lo que sea).

Iniciamos creando la estructura básica de nuestro archivo:

import 'package:flutter/material.dart";

class SplashScreen extends StatefulWidget {
SplashScreen({Key key}) : super(key: key);

@override
_SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
   body: Container(),
 );
 }
} 

En mi caso voy a importar la librería de dart:async y la verdadera página de inicio de mi aplicación que puede ser el login o el home (para este ejemplo los enviaremos luego de unos segundos a home.dart)

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:pruebas_flutter/page/home.dart';

Ahora vamos a iniciar el State de la aplicación, justo después de nuestra clase _SplashScreenState, ahi es donde vamos a aplicar una animación a nuestro intro, para eso declaramos algunas variables que nos servirán para obtener el efecto deseado:

 Timer _timerAnima;
 Timer _timer;
 var _altura;
 bool select = false;

@override
void initState() {
     super.initState();
     _altura = 1000.0;
     _timerAnima = Timer(const Duration(milliseconds: 2000), _cambiar);
     _timer = Timer(const Duration(milliseconds: 2800), _onLogin);
}

Ahora agregamos el dispose() para liberar los recursos utilizados:

@override
 void dispose() {
 _timer.cancel();
 _timerAnima.cancel();
 super.dispose();
 }

Luego vamos a crear las funciones _cambiar que es la animación que estamos realizando y _onLogin que es donde hacemos la redirección al home de nuestra aplicación:

void _onLogin(){
 if(mounted){
    Navigator.of(context).pushReplacement(
    MaterialPageRoute(builder: (BuildContext context) => HomePage())
   );
  }
}

void _cambiar() {
  setState(() {
  select = !select;
  });
}

Por último actualizamos el return de nuestro build y le aplicamos el widget AnimatedContainer() al body del Scaffold:

return Scaffold(
   body: AnimatedContainer(
      width: select ? MediaQuery.of(context).size.width : MediaQuery.of(context).size.width,
      height: select ? 0.00 : _altura,
      color: select ? Colors.black : Colors.blue,
      duration: Duration(seconds: 2),
      curve: Curves.fastOutSlowIn,
      child: Center(
         child: FlutterLogo(size: 100),
      ),
    ),
  );

Ahora todo nuestro código completo quedaría así:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:pruebas_flutter/page/home.dart';

class SplashScreen extends StatefulWidget {
SplashScreen({Key key}) : super(key: key);

@override
_SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State {
  Timer _timerAnima;
  Timer _timer;
  var _altura;
  bool select = false;

@override
  void initState() {
    super.initState();
    _altura = 1000.0;
    _timerAnima = Timer(const Duration(milliseconds: 2000), _cambiar);
    _timer = Timer(const Duration(milliseconds: 2800), _onLogin);
}

@override
  void dispose() {
    _timer.cancel();
    _timerAnima.cancel();
    super.dispose();
}

void _onLogin(){
  if(mounted){
     Navigator.of(context).pushReplacement(
       MaterialPageRoute(builder: (BuildContext context) => HomePage())
     );
    }
  }

void _cambiar() {
   setState(() {
     select = !select;
   });
}

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: AnimatedContainer(
      width: select ? MediaQuery.of(context).size.width : MediaQuery.of(context).size.width,
      height: select ? 0.00 : _altura,
      color: select ? Colors.black : Colors.blue,
      duration: Duration(seconds: 2),
      curve: Curves.fastOutSlowIn,
      child: Center(
         child: FlutterLogo(size: 100),
       ),
     ),
   );
 }
}

 Recuerda que para que esto funcione debes agregar este archivo splash.dart a tu archivo main.dart y colocarlo como tu initialRoute algo más o menos así:

return MaterialApp(
    title: 'App de Pruebas',
    home: HomePage(),
    initialRoute: 'splash',
    routes: {
       'splash' : (BuildContext contex) => SplashScreen(),
       'home' : (BuildContext contex) => HomePage(),
     },
);

Ya con esto al arrancar nuestra app llamaremos primero el archivo splash.dart este hará una animación que pasa de tener el fondo azul a pantalla completa para irse colocando más pequeño y  con un azul más oscuro hasta que a los 2800 milisegundos se redireccionará a la página de HomePage.