Button Animation Using Rive and Flutter

Flutter and Rive – Creating Animated Buttons

Flutter and Rive – Creating Animated Buttons

In this article, we will look at how to create a super cool Animated Button using the Rive App and flare_flutter plugin. Creating animation is now really easy with the help of the Rive Cloud App, that lets you generate flr files which can then be used to run on the Flutter App.

In the previous article, we learned how to edit and create a simple Splash Screen Animation in Flutter App. We will extend that knowledge here to work on a Multi-Animation with the help of the Rive App. It should be fairly easy if you are already familiar with the basics of Rive.

Creating Multi Animation in Rive

The first step of the process is to design Multi Animation in the same file. This is possible by making use of the Animation tab on the bottom left. Click on the ‘+’ button and add any number of animations you want. The picture below shows the names of the two animations that were created for this App purpose.

Rive App Animation Tab
Rive App Animation Tab

Upon creating the Animation, you are now going to start working on the Design. I have created the simplest of all designs using only ‘ellipses’ and ‘rectangle’. The picture below shows what and how they are aligned on the ArtBoard.

Rive App Design
Rive App Design

Time to start animating these different elements. Animation involves careful placement and properly timed changes on the UI. If you want to create good animations, always time them!

Sample Animation Time Frame
Sample Animation Time Frame

Once you are done creating this timed changes, you can change anything you want to. Alter opacity, position, direction, size and even rotate. These are some of the basic changes that are possible.

To know exactly how I have animated this, take a look at the video below for detailed steps.

Integrating Rive with Flutter App

Now since the animation is completed and loaded on the Project, it is time to integrate it using the flare_flutter plugin. To know more about what the plugin can do, read the previous article, create a simple Splash Screen Animation using Flutter and Rive.

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

Sample Code to play one Animation,

FlareActor(
'assets/ButtonAnim.flr',
animation: 'menuload',
)

Once this is completed, you can create another widget to load the other animation, ‘Goback’ which can then be placed inside a simple Button.

The next section details the whole code example and the app output that is possible through this Flutter Application.

Flutter Rive Button Animation – Code

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }
}
class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  bool changeButton = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: FlatButton(
          child: SizedBox(
            child: FlareActor(
              'assets/ButtonAnim.flr',
              animation: 'menuload',
            ),
          ),
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (context)=>HomePage()));
          },
        ),
      )
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: FlatButton(
            child: SizedBox(
              child: FlareActor(
                'assets/ButtonAnim.flr',
                animation: 'Goback',
              ),
            ),
            onPressed: (){
              Navigator.of(context).pop();
            },
          )
      ),
    );
  }
}

The final application looks like,

Button Animation Using Rive and Flutter
Button Animation Using Rive and Flutter

Leave a Comment