Flutter - Animated Splash Screen

Para fines practicos escribiremos la minima cantidad de codigo y utilizaremos rive (pero tambien puedes usar un .gif).

Instalamos rive.

rive: ^0.7.18

Iniciamos con lo facil.

main.dart

import 'package:flutter/material.dart';
import 'package:animated_screen/routes/login.dart';
import 'package:animated_screen/routes/sphasl_screen_animated.dart';

void main() => runApp(
      MaterialApp(
        initialRoute: SplashScreenAnimated.routeName,
        routes: {
          SplashScreenAnimated.routeName: (context) => SplashScreenAnimated(),
          Login.routeName: (context) => Login(),
        },
      ),
    );

routes/login.dart

import 'package:flutter/material.dart';

class Login extends StatelessWidget {
  static final String routeName = 'Login';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Login'),
            TextField(),
            TextField(),
          ],
        ),
      ),
    );
  }
}

Aqui la magia.

routes/sphasl_screen_animated.dart

import 'package:flutter/material.dart';
import 'package:animated_screen/routes/login.dart';
import 'package:rive/rive.dart';

class SplashScreenAnimated extends StatefulWidget {
  static final String routeName = 'SplashScreenAnimated';

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

class _SplashScreenAnimatedState extends State<SplashScreenAnimated> {
  @override
  void initState() {
    super.initState();

    /// WidgetsBinding.instance?.addPostFrameCallback nos asegura 
    /// que no empezara a hacer el Future.delayed antes de que el
    /// widget este completamente construido.
    WidgetsBinding.instance?.addPostFrameCallback((_) => timeout());
  }

  Future<void> timeout() async => Future.delayed(

      /// [TODO]: Esto depende de cuanto dure, o cuanto
      /// quieres que dure, tu animacion. Recuerda cambiarlo.
      Duration(seconds: 2),
      () => Navigator.pushNamedAndRemoveUntil(
          context, Login.routeName, (route) => false));

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        /// Para fines practicos usarremos esta animacion 
        /// disponible en linea.
        child: RiveAnimation.network(
          'https://cdn.rive.app/animations/vehicles.riv',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

Para agregar tus propias animaciones de rive. Solo agregalas a tu carpeta de assets y habilita el path en tu yaml.

flutter:

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/

Y modificas la linea 37 (aproximadamente). Yo usare una animacion de zombie del autor JcToon.

/// Pasas de esto:
RiveAnimation.network(
    'https://cdn.rive.app/animations/vehicles.riv',
    fit: BoxFit.cover,
),

/// A esto:
RiveAnimation.asset(
    'assets/zombie-character.riv',
    fit: BoxFit.cover,
),

// Si vas a usar un gif:
Image.asset('assets/gif.gif',
    fit: BoxFit.cover,
)

Y listo! 🚀🚀

Mucha suerte en tus proyectos, precioso ❤️. Déjame tu opinión ¿Prefieres este tipo de ejemplos o preferirías una aplicación completa? ¿Otro tipo de tutoriales? Ayúdame a ayudarte.

Blog

Flutter - Animated Splash Screen

Ushieru Kokoran

Instalamos rive.

Iniciamos con lo facil.

Aqui la magia.

Join Our Newsletter. No Spam, Only the good stuff.

Related