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:

Flutter animated figure

C# Sorting a List with numbers with colons or comma format

I had a problem where I had to sort a list where there where values with colons, like chapters or similar in ascending order. If you have a List with dot or comma values instead, you can use the same method.

  • 1:3
  • 1:4
  • 1:40
  • 1:5
  • 2:4
  • 5:9
  • 4:90
  • 3:500
  • 3:4
  • 1
  • 1:50

The sort order of this would be from the lowest number from the left side and the right side, like this:

  • 1
  • 1:3
  • 1:4
  • 1:5
  • 1:40
  • 1:50
  • 3:4
  • 3:500
  • 4:90
  • 5:9

Now it doesn’t seem that difficult, but it took me a while to figure out that there is a built-in class called Version for you to use which is perfect for this. I tried first simply convert and parse them as floats and sort them that way, but this works only until you reach the problem where you have 1:40 and 1:4 and they both would be parsed as 1,4 as the zeroes will be taken away. Same goes for 1:5 and 1:50, they would both be parsed as 1,5 and here as well would be a sorting problem since they are both seen as the same.

So that’s where the Version type comes in, we can parse a string in a version format. So instead of inventing the wheel again, let’s see what we can do with it.

If we want to use the Sort method, we could do it like this. First of all, create a new class, let’s call it MyAwesomeComparer.

	public class MyAwesomeComparer : Comparer<MyObjectWithTheColon>
	{
		public override int Compare(MyObjectWithTheColon x, MyObjectWithTheColon y)
		{
			Version outVerX = new Version();
			Version.TryParse(x.Name + ".0", out outVerX);

			Version outVerY = new Version();
			Version.TryParse(y.Name + ".0", out outVerY);

			return outVerX.CompareTo(outVerY);
		}
	}

MyObjectWithTheColon is my class I use my items for a List and in it this class, we have a name property, this is the property that contains the values such as above, for example 1:5. So for this to work we need to replace the colon so it becomes dots like this (see code below). Note that if you have a list of values with dots like 1.3, 1.4, then you don’t need to do this obviously. If you have a list of commas, then simply do the same Replace, but instead of replacing comma, replace your comma to a dot.

	public class MyAwesomeComparer : Comparer<MyObjectWithTheColon>
	{
		public override int Compare(MyObjectWithTheColon x, MyObjectWithTheColon y)
		{
			Version outVerX = new Version();
			Version.TryParse(x.Name.Replace(":", ".") + ".0", out outVerX);

			Version outVerY = new Version();
			Version.TryParse(y.Name.Replace(":", ".") + ".0", out outVerY);

			return outVerX.CompareTo(outVerY);
		}
	}

We replace the dot and try parse it with the Version.TryParse(), and then we retrive the value to our variable outVerX. We do the same thing for the other parameter y we are comparing and save the value to outVerY, and in the end we return the one who is bigger (see explanation on the int that returns here) with the CompareTo from the Version class. We can now use this overridden Comparer like this to get the sorted list!

MyList.Sort(new MyAwesomeComparer());