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:

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

rive animation in dart

rive animation in dart

  • 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 .flr 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. I have 4 files in the assets folder.
-android
-assets
    -my.flr
    -teddy.flr
    -test2.flr
    -test3.flr
-build
-ios
-lib
    -main.dart
-test
-web
-pubspec.lock
-pubspec.yaml
-README.md
-rive_flutter.iml
  • Now, edit pubspec.yaml file :
    • Add rive in dependencies :
    • Add assets in flutter:

rive animation in dart

  • After that, open main.dart file as we are going to write the code in this file.
  • Delete all the code from the main.dart file and write the below code to add animations to our application.

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GeeksForGeeks")),
      body: Container(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 700,
                height: 300,
                child: FlareActor(
                  "assets/test3.flr",
                  animation: "day_and_night",
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                width: 700,
                height: 300,
                child: FlareActor(
                  "assets/my.flr",
                  animation: "left2right",
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 700,
                height: 300,
                child: FlareActor(
                  "assets/teddy.flr",
                  //test, success,idle,fail
                  animation: "success"
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 700,
                height: 300,
                child: FlareActor(
                  "assets/test2.flr",
                  animation: "Demo Mode",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

chevron_right


  • We will display these animations on our Home Screen. Don’t forget to give the type of animation in FlareActor Widget otherwise, you will not get any animation effect.
  • Run the app by writing command flutter run in terminal and see the output. 

Output:

Complete code is available on  https://github.com/singhteekam/rive-flutter




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

12


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.