Flutter - Animated Splash Screen
Tags: flutter
Published: 2021-06-16 15:50:34

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

### Instalamos rive.
```yaml
rive: ^0.7.18
```
### Iniciamos con lo facil.
**main.dart**
```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**
```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**
```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.
```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](https://rive.app/JcToon/).
```dart
/// 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.