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.
Top comments (0)