Do I need StateMachineController for basic Rive playback in Flutter?

No. RiveAnimation.asset plays and loops the animation automatically. StateMachineController is only needed when you want to fire Hover or Clicked inputs in response to user interaction.

What's the input naming convention for Unicorn Icons?

Every Unicorn Icon has a state machine called 'State Machine 1'. The Hover input is a boolean (SMIBool) and Clicked is a trigger (SMITrigger). Use controller.findInput ('Hover') and controller.findInput ('Clicked') with the appropriate cast.

Should I use Rive or Lottie in Flutter?

Rive is the better choice for interactive icons in Flutter. It has GPU-accelerated rendering, smaller file sizes, and built-in state machine support. Lottie is simpler if you just need a looping animation with no user interaction.

Limited offer — lifetime access:$75$60

Rive · Flutter

Using Rive icons in Flutter

RiveAnimation.asset handles the basics. StateMachineController gives you the Hover and Clicked inputs for full interaction.

Add the rive package

Open pubspec.yaml and add the dependency.

YAML

dependencies:
  flutter:
    sdk: flutter
  rive: ^0.13.0

Register the .riv file as an asset

Download your icon from Unicorn Icons. Put the .riv in an assets folder and declare it in pubspec.yaml.

YAML

flutter:
  assets:
    - assets/icons/your_icon.riv

Simple embed with RiveAnimation.asset

No controller needed for a basic looping animation.

DART

import 'package:rive/rive.dart';

class MyIcon extends StatelessWidget {
  const MyIcon({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 64,
      height: 64,
      child: RiveAnimation.asset(
        'assets/icons/your_icon.riv',
        stateMachines: const ['State Machine 1'],
        fit: BoxFit.contain,
      ),
    );
  }
}

Add hover and click interaction

Use StateMachineController to get the Hover and Clicked inputs. Wrap in MouseRegion and GestureDetector.

DART

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

class InteractiveRiveIcon extends StatefulWidget {
  const InteractiveRiveIcon({super.key});

  @override
  State<InteractiveRiveIcon> createState() => _InteractiveRiveIconState();
}

class _InteractiveRiveIconState extends State<InteractiveRiveIcon> {
  StateMachineController? _controller;
  SMIBool? _hoverInput;
  SMITrigger? _clickInput;

  void _onRiveInit(Artboard artboard) {
    final controller = StateMachineController.fromArtboard(
      artboard,
      'State Machine 1',
    );
    if (controller != null) {
      artboard.addController(controller);
      _controller = controller;
      _hoverInput = controller.findInput<bool>('Hover') as SMIBool?;
      _clickInput = controller.findInput<bool>('Clicked') as SMITrigger?;
    }
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _hoverInput?.change(true),
      onExit: (_) => _hoverInput?.change(false),
      child: GestureDetector(
        onTap: () => _clickInput?.fire(),
        child: SizedBox(
          width: 64,
          height: 64,
          child: RiveAnimation.asset(
            'assets/icons/your_icon.riv',
            onInit: _onRiveInit,
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}

Trigger animations from app state

Fire inputs from outside the widget using a trigger or by toggling a boolean input.

DART

// One-shot trigger
void triggerSuccess() {
  final trigger = _controller?.findInput<bool>('Success') as SMITrigger?;
  trigger?.fire();
}

// Boolean toggle
void setActive(bool value) {
  final input = _controller?.findInput<bool>('IsActive') as SMIBool?;
  input?.change(value);
}

State machine input names

Every Unicorn Icon uses a state machine called State Machine 1 with boolean input Hover and trigger input Clicked.

Common questions

Do I need StateMachineController for basic playback?

No. RiveAnimation.asset plays and loops automatically. Controller is only needed for interaction.

Rive or Lottie in Flutter?

Rive. GPU-accelerated, smaller files, state machines built in. Lottie is fine for simple looping animations with no interaction.

What inputs do Unicorn Icons include?

State machine State Machine 1 with Hover (SMIBool) and Clicked (SMITrigger).

Get your animated icons

Browse icons ready for Flutter — free to download.

Browse icons