Created an application to learn to add rive splash screen animations in flutter app project

Question

I followed the tutorial of adding a splash screen in an app in flutter using rive animation tool, but the splash screen won't show up.

Link which i followed:- https://pub.dev/packages/rive_splash_screen

Code in main.dart file

import 'package:flutter/material.dart';
import 'package:rive_splash_screen/rive_splash_screen.dart';
import 'package:rive/rive.dart';
import 'dart:ui';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen.navigate(
        name: 'assets/doublersplashscreen.riv',
        next: (_) => const MyHomePage(),
        until: () => Future.delayed(const Duration(seconds: 5)),
        startAnimation: 'Splash',
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height: 400,
      width: 300,
    );
  }
}

Code in pubspec.yaml file

Code in pubspec.yaml file

Answer 1

I have used your code and a sample rive's community-made animation to reproduce the issue. But I could not, and everything worked as expected. So please check the following steps:

1- Be sure that your animation path is added correctly to pubspec.yaml:

pubspec.yaml

flutter:

  uses-material-design: true
 
  assets:
    - assets/

2- Be sure that the riv file's path is written accurately in the SplashScreen.navigate widget. Check if there is an uppercase in the provided path.

home: SplashScreen.navigate(
  name: 'assets/alarm.riv',
  next: (_) => const MyHomePage(title: 'Demo App'),
  until: () => Future.delayed(const Duration(seconds: 5)),
  startAnimation: 'bell',
),

3- Lastly, even if this can not be causing this problem, be sure that you are providing the correct animation name. If you don't, animation will show up but won't animate as expected.

Check the following repository on Github.

If you have further problems, please don't hesitate to write in the comments.