How to Integrate Rive Files Correctly in Your Flutter App (With Sample Code & Solutions)

If you’re struggling to integrate Rive animations in your Flutter app, you’re not alone. From missing artboards to broken state machines or invisible animations — these are common roadblocks developers face.

This guide shows how to use Rive .riv files in Flutter the right way. It also includes common bug fixes and sample code that works.

Step 1: Add the Rive Package to pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  rive: ^0.12.3

Then run:

flutter pub get

Step 2: Add Your Rive File to Assets

flutter:
  assets:
    - assets/animation.riv

Step 3: Basic Integration Example

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Rive in Flutter")),
      body: const RiveAnimation.asset(
        'assets/animation.riv',
        fit: BoxFit.contain,
      ),
    );
  }
}

Step 4: Using State Machine Animations

RiveAnimation.asset(
  'assets/interactive_ui.riv',
  stateMachines: const ['State Machine 1'],
  onInit: _onRiveInit,
)

void _onRiveInit(Artboard artboard) {
  StateMachineController? controller = StateMachineController.fromArtboard(artboard, 'State Machine 1');
  if (controller != null) {
    artboard.addController(controller);
    controller.findInput<bool>('hover')?.value = true;
  }
}

Common Problems & Fixes

Need Help?

I’m Praneeth Kawya Thathsara, a freelance Rive animation expert.

Need custom Rive animations or help fixing broken integrations?

📩 Email me at [email protected] or visit riveanimator.com.

SEO Tags:

Rive Animator, Rive Flutter Integration, Rive Expert, Hire Rive Animator, Rive Character Animation, Freelance Rive Animator, How to Use Rive in Flutter