Add an animated figure in Flutter

I once was curious how to add a animated figure to my study application, and I was unsure how to do it. Where do you start, adding a gif picture? Well that doesn’t do much, but if it is really a simple thing you can do it that way. What if you have more animations though you want to switch between? Well, things are getting more complicated, but it’s not complicated to add an animation at all in Flutter. The difficult part is to create an actual animation. Let’s see how we can first add an animation.

First of all, let’s create a new project so we start with a clean slate with the command:

flutter create myanimationapp

Great we got that down, now open up your pubspec.yaml file. Add rive to your dependencies. This package might be updated, take the latest here.

rive: ^0.7.22

Then inside your main.dart, let’s add this code:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FileIdea',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'FileIdea Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
              Expanded(
                child: Center(
                  child: RiveAnimation.network(
                    'https://cdn.rive.app/animations/vehicles.riv',
                  ),
                ),
              )
            ],
          ),
        ) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }
}

What we are doing here is fetching from the network, hence RiveAnimation.network, and we are getting the rive file which is used for their own demo/sample, and it will be displayed in its full glory: