Rive animations in Flutter

Rive is a very useful animation tool that can create beautiful animations and we can add these in our Application. In flutter, we can add animations by writing so many lines of code but this is not a good practice for a developer. Instead of writing lines of code to create animation, we can create one, using this powerful Rive animation tool. Please read all the below points in sequence to understand the topic clearly.

Steps to implement rive animations in flutter

Step 1 : Create a new flutter application

Create a new Flutter application using command Prompt. For creating a new app, write flutter create YOUR_APP_NAME and run this command.

flutter create river_flutter

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Select and download assets

Now to create new animation go ahead to https://rive.app/explore/popular/trending/all.

You can also 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 .riv and format should be Binary.
Now, open VS Code and create new folder "assets" in the root directory of the application and paste the files which you have downloaded from rive.

Step 3 : Edit pubspec.yaml file

Add rive in dependencies :

dependencies:
      rive: ^0.13.20

Add assets in flutter:

assets:
     - assets/vechiles.riv

Step 4 : Display that using RiveAnimation.asset.

Dart

RiveAnimation.asset(
        'assets/vehicles.riv',
)

Complete source code (main.dart)

main.dart

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

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyRiveAnimation(),
    ));

class MyRiveAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
          child: RiveAnimation.asset(
        'assets/vehicles.riv',
      )),
    );
  }
}