Flutter Mobile Development · Lezione

Integrazione di asset e controller Rive

Carichi file .riv e controlli la riproduzione tramite artboard e controller delle animazioni Rive.

Integrazione di asset e controller Rive è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

What Rive Brings to Flutter

Rive is a real-time interactive design tool. Its runtime exports a compact binary file with the .riv extension that contains vector art, bones, timelines, and state machines.

The rive Dart package renders these files natively on the GPU, so animations stay crisp at any resolution.
Unlike Lottie, Rive can run state machines driven by runtime inputs, making animations interactive rather than just playback-only.

In this lesson you will load a .riv asset, pick an artboard, and drive playback with an animation controller.

Adding the Dependency and Asset

First declare the package in pubspec.yaml and register the binary file under assets so Flutter bundles it.

The version constraint targets Rive 0.13.x, which exposes the RiveAnimation widget and the controller APIs used below.
The asset path is relative to the project root; any file inside a declared folder is included.

dependencies:
  flutter:
    sdk: flutter
  rive: ^0.13.1

flutter:
  assets:
    - assets/rive/vehicles.riv

The Simplest Embed

The fastest way to render a .riv file is the RiveAnimation.asset constructor. It loads, decodes, and plays the file's default animation automatically.

fit controls how the artboard scales inside the widget bounds, just like BoxFit for images.
This convenience widget is great for fire-and-forget visuals but gives you no handle to control playback.

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

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

  @override
  Widget build(BuildContext context) {
    return const RiveAnimation.asset(
      'assets/rive/vehicles.riv',
      fit: BoxFit.contain,
    );
  }
}

Artboards: The Drawing Surface

A single .riv file can contain multiple artboards — independent canvases, each with its own art and animations. Think of them as separate scenes packed in one file.

If you omit the name, Rive uses the file's default artboard.
Pass artboard: to RiveAnimation.asset to select a specific one by name.

Choosing the right artboard matters when a designer ships a shared library file with many components.

RiveAnimation.asset(
  'assets/rive/vehicles.riv',
  artboard: 'Truck',
  fit: BoxFit.cover,
)

Why You Need a Controller

To start, stop, or switch animations at runtime you must attach a controller. Rive offers two main kinds:

SimpleAnimation — plays one named timeline; toggle its isActive flag to pause/resume.
StateMachineController — drives a state machine through typed inputs (booleans, numbers, triggers).

You create the controller in initState, pass it to the widget via the controllers: list, and dispose it when the widget is torn down.

Driving a SimpleAnimation

A SimpleAnimation targets one timeline by name. Setting isActive = false pauses it; setting it back to true resumes from where it stopped.

Always keep the controller in a field so you can mutate it later.
Pass it inside the controllers list; the widget wires it to the loaded artboard for you.

class DrivingCar extends StatefulWidget {
  const DrivingCar({super.key});
  @override
  State<DrivingCar> createState() => _DrivingCarState();
}

class _DrivingCarState extends State<DrivingCar> {
  late final SimpleAnimation _controller =
      SimpleAnimation('idle', autoplay: true);

  void _toggle() => _controller.isActive = !_controller.isActive;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggle,
      child: RiveAnimation.asset(
        'assets/rive/vehicles.riv',
        controllers: [_controller],
      ),
    );
  }
}

State Machines and Inputs

State machines are where Rive shines. A StateMachineController exposes named inputs that you read off the controller after attaching it:

findInput<bool>('Hover') returns an SMIBool you flip with .value.
findInput<double>('Speed') returns an SMINumber.
findSMI('Tap') as SMITrigger fires a one-shot transition via .fire().

The factory StateMachineController.fromArtboard binds to a named state machine inside the artboard.

StateMachineController? _machine;
SMIBool? _pressed;

void _onRiveInit(Artboard artboard) {
  final controller = StateMachineController.fromArtboard(
    artboard,
    'ButtonMachine',
  );
  if (controller != null) {
    artboard.addController(controller);
    _machine = controller;
    _pressed = controller.findSMI('Pressed') as SMIBool?;
  }
}

Wiring the onInit Callback

When you need access to the Artboard instance — for example to attach a state machine — use the onInit callback of RiveAnimation.asset.

onInit fires once after the file is decoded and the artboard is ready.
This is the correct place to build a StateMachineController, since the artboard does not exist before load completes.

RiveAnimation.asset(
  'assets/rive/vehicles.riv',
  artboard: 'Button',
  stateMachines: const ['ButtonMachine'],
  onInit: _onRiveInit,
)

Loading the File Manually

For full control — caching, preloading, or rendering with a custom Rive widget — decode the file yourself with RiveFile.asset and pull the artboard from mainArtboard.

RiveFile.initialize() must run once before manual decoding (the widget constructors handle this for you).
artboard.instance() gives you an isolated copy so two widgets can animate independently.

Future<Artboard> loadTruck() async {
  await RiveFile.initialize();
  final file = await RiveFile.asset('assets/rive/vehicles.riv');
  final artboard = file.mainArtboard.instance();
  final controller = SimpleAnimation('drive');
  artboard.addController(controller);
  return artboard;
}

Always Dispose Controllers

Controllers hold references to the artboard and keep advancing the animation clock. Leaking them wastes frames and memory.

Dispose every controller you created in State.dispose().
For state machines, also clear input references so they can be garbage collected.

The Rive widget removes controllers it owns automatically, but controllers you attach manually with addController are your responsibility.

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

A Pure-Dart Playback Model

The Flutter widgets need a GPU and a host app, so they cannot run on a plain console. The logic of a simple animation controller, however, is just Dart and is easy to model and test in isolation.

Below is a tiny standalone simulation of how a SimpleAnimation's isActive flag gates time advancement — runnable on any Dart judge.

class FakeSimpleAnimation {
  FakeSimpleAnimation(this.name, {this.isActive = true});
  final String name;
  bool isActive;
  double _time = 0;

  void advance(double dt) {
    if (isActive) _time += dt;
  }

  double get time => _time;
}

void main() {
  final anim = FakeSimpleAnimation('idle');
  anim.advance(0.5);
  anim.isActive = false;
  anim.advance(0.5); // ignored while paused
  anim.isActive = true;
  anim.advance(0.25);
  print('Elapsed: ${anim.time}s');
}

Quick Check

You need to flip a boolean input on a Rive state machine when the user taps a button. Which approach is correct?

Recap

You can now embed and drive Rive in Flutter:

Add rive to pubspec.yaml and register the .riv asset.
RiveAnimation.asset renders quickly; select a canvas with artboard:.
Attach a controller to control playback: SimpleAnimation for a single timeline, StateMachineController for interactive inputs (SMIBool, SMINumber, SMITrigger).
Use onInit to reach the Artboard, or load manually with RiveFile.asset for full control.
Always dispose controllers you create to avoid leaks.

Domande Frequenti

La lezione «Integrazione di asset e controller Rive» è gratuita?

Sì — il testo completo di «Integrazione di asset e controller Rive» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.

Cosa imparerò in «Integrazione di asset e controller Rive»?

Carichi file .riv e controlli la riproduzione tramite artboard e controller delle animazioni Rive. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Flutter Mobile Development?

Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Integrazione di asset e controller Rive»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?

Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Integrazione di asset e controller Rive
Macchine a stati e movimento guidato dagli input
Transizioni Hero e movimento degli elementi condivisi
AnimationController sfalsati e coreografati

← Torna a Flutter Mobile Development