flutter - 如何在 Flutter 中添加 Rive 动画

Question

众所周知左 是一个非常有用的动画工具，可以创建漂亮的动画，我们可以将它们添加到我们的应用程序中。但是我们如何实现以及如何使用 创建一个超酷的动画左 应用程序和flare_flutter插件？

Answer 1

回答我自己的问题以分享我的知识
在 Rive Cloud 应用程序的帮助下，现在创建动画非常容易，它可以让您生成 fr 然后可用于在 Flutter 应用程序上运行的文件。
这是在我们的 Flutter 应用程序中实现 rive 的分步过程

第一步是继续https://rive.app/explore/popular/trending/all .并创建或任何您想要导出由其他一些用户创建的动画的动画。单击任何动画，然后单击 在 Rive 中打开 .然后通过单击导出按钮下载它。

文件扩展名应该是 .flr 格式应为 二进制 .

现在，打开 VS Code 或 Android Studio 并创建新文件夹 Assets 在应用程序的根目录中并粘贴您从 rive 下载的文件。我在 Assets 文件夹中有 2 个文件。

现在，由于动画已完成并加载到项目中。添加 rive和 flare_flutter您的 pubspec.yaml 中的依赖项中的插件文件 :

但是，现在我们将创建一个简单的 Widget，它使用字段 animation 加载其中一个动画。可与 FlareActor 一起使用小部件。

FlareActor(
  'assets/loading_animation_sun_flare.flr',
  animation: 'My Test',
)

注:不要忘记给出你在 Rive 上设置动画名称的动画字段类型，就像在这个例子中我设置的“我的测试 ” 和 “无题 ”在 FlareActor Widget 中，否则，您将无法获得任何动画效果。

这是完整的代码:

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

void main() => runApp(HomePage());

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Coflutter - Dismiss Keyboard',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Rive Animation'),
          backgroundColor: Colors.deepPurple,
        ),
        body: RiveAnimationPage(),
      ),
    );
  }
}

class RiveAnimationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              width: 700,
              height: 300,
              child: FlareActor(
                "assets/loading_animation_sun_flare.flr",
                animation: "My Test",
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
                width: 400,
                height: 400,
                child: FlareActor(
                  'assets/Success_Check.flr',
                  animation: 'Untitled',
                )
            ),
          )
        ],
      )
    );
  }
}

有关更多信息，请参阅: https://androidmonks.com/flutter-rive-animated-buttons/