DEV Community

Ushieru Kokoran
Ushieru Kokoran

Posted on

Flutter - Animated Splash Screen

#flutter

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

Instalamos rive. 

rive: ^0.7.18
Enter fullscreen mode Exit fullscreen mode

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(), }, ), );
Enter fullscreen mode Exit fullscreen mode

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(), ], ), ), ); } }
Enter fullscreen mode Exit fullscreen mode

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, ), ), ); } }
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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, )
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)