Flutter and Rive – Creating Splash Screen

Flutter and Rive – Creating Splash Screen

In this article, we will see how to make use of the latest Rive app to create animations that are then integrated into the Flutter application.

Rive, previously called Flare, is an application to create great animations that can then be played on any device. The best part about Rive Animation is that they can be controlled programmatically. Every animation, keyframe, location can be individually controlled through available plugins that can then be used effectively to produce awesome animations on the UI.

We will look at how to integrate the Flutter and Rive application to create a simple Splash Screen app.

Creating a Rive Animation

Creating a Rive Animation is pretty straightforward without any complex setups or drawings. Navigate to the Rive App official website and create a free tier account.

Click on the Your Files option and open up the Rive App ArtBoard. In order to make things easy, I have created a complete video on how to create the animation below. Take a look at the video to understand all the minor changes required to create the Splash Screen Animation.

When you are done creating the .flr file, it is a matter of inserting it in the Flutter App.

Flare Flutter Plugin

This article makes use of the official flare_flutter plugin. The plugin is still called flare which happens to be the name of the 2dimension companies product earlier. Flare Flutter plugin provides a lot of different classes to use in the Flutter application. Some of the most useful classes include,

  • flare_controller
  • flare_actor
  • flare_controls
  • trim_path
  • flare_render_box

We will look at how to use the FlareActor widget that comes under the flare_actor. Creating the FlareActor makes it easy to play the .flr file downloaded from the previous step.

Rive Integration with Flutter App

The code block below explains how the Rive can be integrated with Flutter Application. We are making use of a simple plugin called flare_flutter as mentioned above.

Include the plugin in your pubspec.yaml file and we are ready to write the main.dart as given below.

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> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 8), () {
      Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          ));
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlareActor("assets/idle.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"Idle"),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Home Page"),
      ),
    );
  }
}

The final application looks like,

Flutter Rive App Output
Flutter Rive App Output

To know more about creating the Flutter & Rive application, follow the youtube channel and create awesome Rive apps easily.

Leave a Comment

Your email address will not be published. Required fields are marked *