创建了一个应用程序来学习如何在 flutter 应用程序项目中添加启动画面动画

Question

我按照教程使用rive动画工具在flutter中添加启动画面，但是启动画面不显示。

Link 我跟着：- https://pub.dev/packages/rive_splash_screen

main.dart 文件中的代码

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,
    );
  }
}

pubspec.yaml 文件中的代码

Code in pubspec.yaml file

Answer 1

我已使用您的代码和示例 rive 的 community-made 动画来重现该问题。但我做不到，一切都按预期进行。所以请检查以下步骤：

1- 确保您的动画路径正确添加到 pubspec.yaml:

pubspec.yaml

flutter:

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

2- 确保 riv 文件的路径在 SplashScreen.navigate 小部件中准确写入。检查提供的路径中是否有uppercase。

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

3- 最后，即使这不是导致此问题的原因，也请确保您提供了正确的动画名称。如果不这样做，动画将会出现，但不会按预期进行动画处理。

检查 Github 上的以下存储库。

如果您还有其他问题，请随时在评论中留言。

创建了一个应用程序来学习如何在 flutter 应用程序项目中添加启动画面动画

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

splash-screen

flare

dart

flutter

rive