FlutterアプリでRIVE2製アニメーションが動かない！？場合に読む記事

今回は、FlutterアプリのスプラッシュスクリーンにRIVE２を使ってアニメーションを作ってみました。
気づいたことや引っかかったことを簡単にまとめます。
大まかな流れなどは省いて、注意点のみ記載しています。

導入の仕方などは、こちらでOKだと思います。
https://zenn.dev/zumikou/scraps/8f9e1130af58e4
https://qiita.com/kitamuyu/items/13909a2888757b456837

RIVE2にjpg、pngファイルをインポートできない。

rive2
https://rive.app/index.html

自分の持っている画像を動かそうと思ったが無理でした。
しかし、svgファイルはうまくインポートできました。
自分で2Dの絵を作るところから始めるのがめんどくさい方は、svg素材を持っていると楽ですね。

packageのriveでアニメーションが動かない

以下がそのパッケージ
https://pub.dev/packages/rive

exampleからinitState部分を抜粋。

@override
  void initState() {
    super.initState();

    // Load the animation file from the bundle, note that you could also
    // download this. The RiveFile just expects a list of bytes.
    rootBundle.load('assets/off_road_car.riv').then(
      (data) async {
        final file = RiveFile();

        // Load the RiveFile from the binary data.
        if (file.import(data)) {
          // The artboard is the root of the animation and gets drawn in the
          // Rive widget.
          final artboard = file.mainArtboard;
          // Add a controller to play back a known animation on the main/default
          // artboard.We store a reference to it so we can toggle playback.
          artboard.addController(_controller = SimpleAnimation('idle'));
          setState(() => _riveArtboard = artboard);
        }
      },
    );
  }

僕は、rivファイルの部分のパスを自分のものに置き換えて終了かと思っていました。

しかし、

artboard.addController(_controller = SimpleAnimation('idle'));

'idle'の部分を自分で作ったアニメーションの名前に変更しないとダメでした。
僕の場合は以下の写真のように、名前は「Animation 1」でした。

この２点がつまずいた点でした。
参考にならば幸いです。