0Pricing
Flutter Mobile Development · レッスン

Riveアセットとコントローラーの組み込み

.rivファイルを読み込み、Riveのアートボードとアニメーションコントローラーで再生を制御します。

「Riveアセットとコントローラーの組み込み」はCoddyKit上の無料Flutter Mobile Developmentレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFlutter Mobile Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.

よくある質問

「Riveアセットとコントローラーの組み込み」レッスンは無料ですか？

はい。「Riveアセットとコントローラーの組み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flutter Mobile Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

「Riveアセットとコントローラーの組み込み」で何を学びますか？

.rivファイルを読み込み、Riveのアートボードとアニメーションコントローラーで再生を制御します。 ブラウザで直接実行するハンズオンコードでFlutter Mobile Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flutter Mobile Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlutter Mobile Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「Riveアセットとコントローラーの組み込み」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlutter Mobile Developmentレッスンでコードを書いて実行できますか？

はい。すべてのFlutter Mobile Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Riveアセットとコントローラーの組み込み
  2. ステートマシンと入力駆動モーション
  3. Heroトランジションと共有要素のモーション
  4. 段階的アニメーションと振り付けられたAnimationController
← Flutter Mobile Developmentに戻る