rive-app / rive-app/rive-flutter

How to detect animation finish event

Open
#627 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Dart
Stars
1.5k
Forks
240
PR merge metrics
No merged PRs in 30d

Description

Submission checklist
  • I have confirmed the issue is present in the latest version of the rive Flutter package
  • I have searched the documentation and forums and could not find an answer
  • I have searched existing issues and this is not a duplicate
Description

How do I know when the animation is ending?

import 'package:auto_route/auto_route.dart';
import 'package:mobidrive/core/helpers/service_locator.dart';
import 'package:mobidrive/core/router/app_router.gr.dart';
import 'package:mobidrive/shared/constants/asset_paths.dart';
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

@RoutePage()
class SplashView extends StatefulWidget {
  const SplashView({super.key});

  @override
  State<SplashView> createState() => _SplashViewState();
}

class _SplashViewState extends State<SplashView> {
  late final fileLoader = FileLoader.fromAsset(
    AssetPaths.splashAnimationLight,
    riveFactory: Factory.rive,
  );

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    fileLoader.dispose();
    super.dispose();
  }

  void _navigateToNext() async {
    if (mounted) {
      context.router.replaceAll([const BottomNavWrapper()]);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RiveWidgetBuilder(
          fileLoader: fileLoader,
          builder: (context, state) => switch (state) {
            RiveLoading() => const SizedBox.shrink(),
            RiveFailed() => ErrorWidget.withDetails(
              message: state.error.toString(),
              error: FlutterError(state.error.toString()),
            ),
            RiveLoaded() => RiveWidget(
              controller: state.controller,
              fit: Fit.contain,
            ),
          },
        ),
      ),
    );
  }
}
Reproduction steps / code

No response

Upload your reproduction files / stack trace

No response

Source .riv / .rev file

No response

Screenshots / video

No response

Rive Flutter package version

0.14.5

Flutter version

Flutter 3.41.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision db50e20168 (4 weeks ago) • 2026-03-25 16:21:00 -0700
Engine • hash 5cdd32777948fa7a648fac915f8da7120ac7e97a (revision 425cfb54d0) (25 days ago) • 2026-03-25 20:14:42.000Z
Tools • Dart 3.11.4 • DevTools 2.54.2

Device

iPhone 15 Pro

OS version

26.4.1

Additional context

No response

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the RiveWidgetBuilder and RiveWidget controller shown in the SplashView, then review the rive 0.14.5 animation-completion API. Done means documenting a concrete way to observe the animation ending and trigger navigation to BottomNavWrapper for the shown Flutter setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
mobile
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.