初めに

https://fireship.io/lessons/animated-navigation-flutter-flare/
このYoutubeを見てやってみようと思ったのですが、Flare→Riveに名前が変わっていたり、リンクが使えなかったり色々変わっていたので、その辺りを記述します。

Riveを使うと自分で作成したアニメーションをアイコンで利用できたり、ボタンでアニメーションを制御したりできます!

アニメーションの作成方法は、今までとほとんど同じようなので、解説は省きます。
他のサイト等を参考にしていただければと思います。

今回は下記のように単純に表示だけしてみます!

◎アニメーションを作成と保存

作成

下記リンクからRive2へ飛べます。
アニメーションの作成方法は、省略します。
https://editor.rive.app/browser/158215/home

保存

作成後に、画面上部の保存のアイコンをクリック

「For newest runtime」をクリックすると、rivファイルがダウンロードされます。

◎Flutterで表示させる

今回はシンプルに表示だけさせてみます!

作成したrivファイルを、flutterプロジェクトに追加・読み込みをする

１：flutterプロジェクト直下にassetsファイルを作成。(名前なんでOKです)
２：pubspec.yamlファイルを編集し、作成したrivファイルに接続できるようにする。
star.rivの部分を自分の作成したファイル名に変更してください。

flutter:
  uses-material-design: true
  assets:
    - assets/star.riv

riveのパッケージをインポートする

下記コマンドを、ターミナルで実行する

flutter pub add rive

[参考]
https://pub.dev/packages/rive

アニメーションを表示させるコード

下記のコードで
assets/star.rivの部分をassets/作成したrivファイル名に変更だけしてコピペで表示ができます!

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

void main() {
  runApp(MaterialApp(home: SimpleAnimation()));
}

class SimpleAnimation extends StatelessWidget {
  const SimpleAnimation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: RiveAnimation.asset(
          'assets/star.riv',
        ),
      ),
    );
  }
}

終わりに

Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
https://mobile.twitter.com/tatsuki_kt

flutter で自作アニメーションを表示させる Rive2（旧 Flare）

初めに