How to add Rive animations in Flutter

Question

As know everyone Rive is a very useful animation tool that can create beautiful animations and we can add these to our Application. But how can we implement and how to create a super cool Animation using the Rive App and flare_flutter plugin?

Solution

Answered my own question to share my knowledge

Creating animation is now really easy with the help of the Rive Cloud App, which lets you generate flr files which can then be used to run on the Flutter App.

Here is the step by step process to implement rive in our flutter app

1. The first step is to go on https://rive.app/explore/popular/trending/all . and create or also any of the animations you want export animations that were created by some other users. Click any animation and Click Open in Rive. Then download it by clicking the export button.

• The file extension should be .flr and format should be Binary.

2. Now, open VS Code or Android Studio and create new folder assets in the root directory of the application and paste the files which you have downloaded from rive. I have 2 files in the assets folder.

   

3. Now since the animation is completed and loaded on the Project. Add rive and flare_flutter plugin in dependencies in your pubspec.yaml file :

   

4. However, now we will create a simple Widget that loads one of the animations using the field animation available with the FlareActor widget.

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

   Note: Don’t forget to give the type of animation field that you set Animation name on Rive like in this example I set “My Test” And “Untitled” in FlareActor Widget otherwise, you will not get any animation effect.

Here is the full code:

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

For more info, see: https://androidmonks.com/flutter-rive-animated-buttons/