Mobilutveckling med Flutter · Lektion

Bädda in Rive-resurser och styrenheter

Läs in .riv-filer och styr uppspelningen via Rive-artboards och animationsstyrenheter.

Lektion 1 av 413 steg

Bädda in Rive-resurser och styrenheter är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad Rive tillför Flutter

Rive är ett interaktivt designverktyg i realtid. Dess runtime exporterar en kompakt binärfil med filändelsen .riv som innehåller vektorgrafik, ben, tidslinjer och tillståndsmaskiner.

Dart-paketet rive renderar dessa filer direkt på GPU:n, så animationerna förblir skarpa i alla upplösningar.
Till skillnad från Lottie kan Rive köra tillståndsmaskiner som styrs av indata under körning, vilket gör animationerna interaktiva i stället för enbart uppspelningsbara.

I den här lektionen läser du in en .riv-resurs, väljer en artboard och styr uppspelningen med en animationscontroller.

Lägga till beroendet och resursen

Deklarera först paketet i pubspec.yaml och registrera den binära filen under assets så att Flutter paketerar den.

Versionsvillkoret gäller Rive 0.13.x, som tillhandahåller widgeten RiveAnimation och de controller-API:er som används nedan.
Sökvägen till resursen är relativ till projektroten. Alla filer i en deklarerad mapp inkluderas.

dependencies:
  flutter:
    sdk: flutter
  rive: ^0.13.1

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

Den enklaste inbäddningen

Det snabbaste sättet att rendera en .riv-fil är konstruktorn RiveAnimation.asset. Den läser in, avkodar och spelar automatiskt filens standardanimation.

fit styr hur artboarden skalas inom widgetens gränser, precis som BoxFit för bilder.
Den här bekvämlighetswidgeten passar bra för visuella effekter som bara ska spelas upp, men ger dig ingen möjlighet att styra uppspelningen.

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: ritytan

En enda .riv-fil kan innehålla flera artboards – fristående ritytor, var och en med egen grafik och egna animationer. Tänk på dem som separata scener samlade i en fil.

Om du utelämnar namnet använder Rive filens standard-artboard.
Ange artboard: till RiveAnimation.asset för att välja en specifik artboard med namn.

Det är viktigt att välja rätt artboard när en designer levererar en gemensam biblioteksfil med många komponenter.

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

Varför du behöver en controller

För att starta, stoppa eller byta animationer under körning måste du koppla in en controller. Rive erbjuder två huvudtyper:

SimpleAnimation – spelar upp en namngiven tidslinje; växla flaggan isActive för att pausa eller återuppta.
StateMachineController – styr en tillståndsmaskin via typad indata (booleska värden, tal och triggers).

Skapa controllern i initState, skicka den till widgeten via listan controllers: och frigör den när widgeten tas bort.

Styra en SimpleAnimation

En SimpleAnimation riktar sig mot en tidslinje som identifieras med namn. Om du anger isActive = false pausas den; om du anger true igen fortsätter den där den stoppades.

Förvara alltid controllern i ett fält så att du kan ändra den senare.
Skicka in den i listan controllers; widgeten kopplar den automatiskt till den inlästa artboarden.

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

Tillståndsmaskiner och indata

Det är med tillståndsmaskiner som Rive verkligen glänser. En StateMachineController tillhandahåller namngivna indata som du hämtar från controllern efter att den har kopplats in:

findInput<bool>('Hover') returnerar en SMIBool vars värde du ändrar med .value.
findInput<double>('Speed') returnerar en SMINumber.
findSMI('Tap') som SMITrigger utlöser en engångsövergång via .fire().

Fabriken StateMachineController.fromArtboard kopplar controllern till en namngiven tillståndsmaskin i artboarden.

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

Koppla in onInit-callbacken

När du behöver åtkomst till instansen Artboard – till exempel för att koppla in en tillståndsmaskin – använder du callbacken onInit i RiveAnimation.asset.

onInit körs en gång efter att filen har avkodats och artboarden är klar.
Det här är rätt plats att skapa en StateMachineController, eftersom artboarden inte finns innan inläsningen är klar.

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

Läsa in filen manuellt

För full kontroll – cachelagring, förinläsning eller rendering med en anpassad Rive-widget – avkodar du filen själv med RiveFile.asset och hämtar artboarden från mainArtboard.

RiveFile.initialize() måste köras en gång före manuell avkodning (widgetkonstruktorerna hanterar detta åt dig).
artboard.instance() ger dig en isolerad kopia så att två widgets kan animeras oberoende av varandra.

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

Frigör alltid controllers

Controllers håller referenser till artboarden och fortsätter att driva animationsklockan. Om de läcker slösas bildrutor och minne bort.

Frigör alla controllers som du har skapat i State.dispose().
För tillståndsmaskiner ska du även rensa indatereferenserna så att de kan samlas in av skräpsamlaren.

Rive-widgeten tar automatiskt bort controllers som den själv äger, men controllers som du kopplar in manuellt med addController är ditt ansvar.

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

En uppspelningsmodell i ren Dart

Flutter-widgets behöver en GPU och en värdapp och kan därför inte köras i en vanlig konsol. Logiken i en enkel animationscontroller består däremot enbart av Dart och är enkel att modellera och testa isolerat.

Nedan finns en liten fristående simulering av hur flaggan isActive i en SimpleAnimation styr tidsförloppet – den kan köras i vilken Dart-domare som helst.

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

Snabbkontroll

Du behöver växla ett booleskt indata i en Rive-tillståndsmaskin när användaren trycker på en knapp. Vilket tillvägagångssätt är korrekt?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du kan nu bädda in och styra Rive i Flutter:

Lägg till rive i pubspec.yaml och registrera .riv-resursen.
RiveAnimation.asset renderar snabbt. Välj en rityta med artboard:.
Koppla in en controller för att styra uppspelningen: SimpleAnimation för en enskild tidslinje och StateMachineController för interaktiv indata (SMIBool, SMINumber, SMITrigger).
Använd onInit för att komma åt Artboard, eller läs in manuellt med RiveFile.asset för full kontroll.
Frigör alltid controllers som du skapar för att undvika läckor.

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bädda in Rive-resurser och styrenheter” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Bädda in Rive-resurser och styrenheter”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bädda in Rive-resurser och styrenheter”?

Läs in .riv-filer och styr uppspelningen via Rive-artboards och animationsstyrenheter. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Bädda in Rive-resurser och styrenheter”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Bädda in Rive-resurser och styrenheter
Tillståndsmaskiner och indatastyrd rörelse
Hero-övergångar och rörelse för delade element
Förskjutna och koreograferade AnimationControllers

← Tillbaka till Mobilutveckling med Flutter