Mobiele ontwikkeling met Flutter · Les

Rive-assets en controllers insluiten

Laad .riv-bestanden en stuur het afspelen aan via Rive-artboards en animatiecontrollers.

Les 1 van 413 stappen

Rive-assets en controllers insluiten is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat Rive toevoegt aan Flutter

Rive is een interactief ontwerpprogramma voor realtimegebruik. De runtime exporteert een compact binair bestand met de extensie .riv, waarin vectorafbeeldingen, botten, tijdlijnen en toestandsmachines staan.

Het Dart-pakket rive rendert deze bestanden rechtstreeks op de GPU, zodat animaties bij elke resolutie scherp blijven.
In tegenstelling tot Lottie kan Rive toestandsmachines uitvoeren die door invoer tijdens runtime worden aangestuurd. Daardoor zijn animaties interactief in plaats van alleen af te spelen.

In deze les laad je een .riv-asset, kies je een tekenvlak en stuur je het afspelen aan met een animatiecontroller.

De afhankelijkheid en asset toevoegen

Declareer eerst het pakket in pubspec.yaml en registreer het binaire bestand onder assets, zodat Flutter het meeneemt in de app.

De versiebepaling is gericht op Rive 0.13.x, dat de widget RiveAnimation en de hieronder gebruikte controller-API's beschikbaar maakt.
Het assetpad is relatief ten opzichte van de projecthoofdmap; elk bestand in een gedeclareerde map wordt opgenomen.

dependencies:
  flutter:
    sdk: flutter
  rive: ^0.13.1

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

De eenvoudigste manier om in te sluiten

De snelste manier om een .riv-bestand te renderen is de constructor RiveAnimation.asset. Deze laadt, decodeert en speelt de standaardanimatie van het bestand automatisch af.

fit bepaalt hoe het tekenvlak binnen de grenzen van de widget wordt geschaald, net zoals BoxFit dat doet voor afbeeldingen.
Deze handige widget is ideaal voor beelden die je eenmaal afvuurt en daarna vergeet, maar geeft je geen manier om het afspelen te besturen.

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

Tekenvlakken: het tekenoppervlak

Eén .riv-bestand kan meerdere tekenvlakken bevatten: onafhankelijke canvassen, elk met eigen tekeningen en animaties. Zie ze als afzonderlijke scènes die in één bestand zijn verpakt.

Als je geen naam opgeeft, gebruikt Rive het standaardtekenvlak van het bestand.
Geef artboard: door aan RiveAnimation.asset om een specifiek tekenvlak op naam te selecteren.

Het juiste tekenvlak kiezen is belangrijk wanneer een ontwerper een gedeeld bibliotheekbestand met veel componenten aanlevert.

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

Waarom je een controller nodig hebt

Om animaties tijdens runtime te starten, stoppen of wisselen, moet je een controller koppelen. Rive biedt twee hoofdtypen:

SimpleAnimation — speelt één benoemde tijdlijn af; zet de vlag isActive aan of uit om te pauzeren of te hervatten.
StateMachineController — stuurt een toestandsmachine aan via invoer met een bepaald type (booleans, getallen, triggers).

Je maakt de controller aan in initState, geeft hem via de lijst controllers: door aan de widget en ruimt hem op wanneer de widget wordt afgebroken.

Een SimpleAnimation aansturen

Een SimpleAnimation richt zich op één tijdlijn op naam. Als je isActive = false instelt, wordt deze gepauzeerd; als je de waarde weer op true zet, gaat de animatie verder vanaf het punt waarop deze stopte.

Bewaar de controller altijd in een veld, zodat je hem later kunt aanpassen.
Geef hem door in de lijst controllers; de widget koppelt hem voor je aan het geladen tekenvlak.

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

Toestandsmachines en invoer

Bij toestandsmachines komt Rive echt tot zijn recht. Een StateMachineController stelt benoemde invoerwaarden beschikbaar die je na het koppelen van de controller uitleest:

findInput<bool>('Hover') geeft een SMIBool terug, waarvan je de waarde wijzigt met .value.
findInput<double>('Speed') geeft een SMINumber terug.
findSMI('Tap') als SMITrigger start via .fire() een eenmalige overgang.

De fabriek StateMachineController.fromArtboard koppelt een controller aan een benoemde toestandsmachine binnen het tekenvlak.

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?;
  }
}

De callback onInit koppelen

Wanneer je toegang nodig hebt tot de instantie Artboard — bijvoorbeeld om een toestandsmachine te koppelen — gebruik je de callback onInit van RiveAnimation.asset.

onInit wordt één keer uitgevoerd nadat het bestand is gedecodeerd en het tekenvlak gereed is.
Dit is de juiste plek om een StateMachineController te maken, omdat het tekenvlak niet bestaat voordat het laden is voltooid.

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

Het bestand handmatig laden

Voor volledige controle — zoals cachen, vooraf laden of renderen met een aangepaste Rive-widget — decodeer je het bestand zelf met RiveFile.asset en haal je het tekenvlak op via mainArtboard.

RiveFile.initialize() moet één keer worden uitgevoerd voordat je handmatig decodeert (de widgetconstructors doen dit voor je).
Met artboard.instance() krijg je een geïsoleerde kopie, zodat twee widgets onafhankelijk van elkaar kunnen animeren.

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

Controllers altijd opruimen

Controllers houden verwijzingen naar het tekenvlak vast en laten de animatieklok verder lopen. Als je ze niet opruimt, verspil je beeldframes en geheugen.

Ruim elke controller die je hebt gemaakt op in State.dispose().
Maak bij toestandsmachines ook de verwijzingen naar invoerwaarden leeg, zodat ze door de garbagecollector kunnen worden opgeruimd.

De Rive-widget verwijdert controllers die hij zelf beheert automatisch, maar controllers die je handmatig koppelt met addController vallen onder jouw verantwoordelijkheid.

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

Een afspeelmodel in puur Dart

De Flutter-widgets hebben een GPU en een hostapp nodig, dus ze kunnen niet in een eenvoudige console worden uitgevoerd. De logica van een eenvoudige animatiecontroller bestaat echter alleen uit Dart en is gemakkelijk afzonderlijk te modelleren en te testen.

Hieronder staat een kleine zelfstandige simulatie van hoe de vlag isActive van een SimpleAnimation bepaalt of de tijd vooruitgaat — uitvoerbaar op elke Dart-beoordelaar.

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

Korte controle

Je moet een booleaanse invoerwaarde in een Rive-toestandsmachine wijzigen wanneer de gebruiker op een knop tikt. Welke aanpak is correct?

Beantwoord dit in de interactieve les

Samenvatting

Je kunt nu Rive in Flutter insluiten en aansturen:

Voeg rive toe aan pubspec.yaml en registreer de .riv-asset.
RiveAnimation.asset rendert snel; selecteer een canvas met artboard:.
Koppel een controller om het afspelen te besturen: SimpleAnimation voor één tijdlijn en StateMachineController voor interactieve invoerwaarden (SMIBool, SMINumber, SMITrigger).
Gebruik onInit om toegang te krijgen tot het Artboard, of laad handmatig met RiveFile.asset voor volledige controle.
Ruim controllers die je zelf maakt altijd op met dispose om lekken te voorkomen.

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Rive-assets en controllers insluiten” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Rive-assets en controllers insluiten”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “Rive-assets en controllers insluiten”?

Laad .riv-bestanden en stuur het afspelen aan via Rive-artboards en animatiecontrollers. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Rive-assets en controllers insluiten”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Rive-assets en controllers insluiten
Statemachines en invoergestuurde beweging
Hero-transities en beweging van gedeelde elementen
Gestaffelde en gechoreografeerde AnimationControllers

← Terug naar Mobiele ontwikkeling met Flutter