Flutter Rive Animations 101

Basic tutorial on making an animation on the new Rive and run it in flutter.

Making a design in rive

1. Make an account on rive.app and start a new project.

2. In a new artboard make the initial design.

Here I made 3 circles with different colors depicting a minimalistic pizza.

3. Group the base to make it act as one.

4. Create the elements you want to add on top. Here I made couple of rectangles and colored them green to depict capsicum.

Similarly add them to a group and make it a children of the base.

5. Select this layer and move it out of canvas. Here I made position to -344, -344.

Animating the design

1. Select the animation tab and add a animation on timeline
2. Choose the capsicum on 00:00 and make sure the position is out of canvas.
3. Select a time on timeline and set position to 0,0.
4. You can add more animations of your choice on the timeline.

Design is ready 🎉

5. Download the animation. In the new Rive, you can only download it as binary .riv file.

Adding it to flutter app

1. Add the file to assets folder.
2. Add file to pubspec and add rive dependency

rive: ^0.7.10

3. Initialize animation on the page

Artboard? _riveArtboard;
RiveAnimationController? _controller;

@override
void initState() {
  super.initState();

  rootBundle.load('assets/pizza_min.riv').then((data) async {
    final file = RiveFile.import(data);
    final artBoard = file.mainArtboard;

    setState(() => _riveArtboard = artBoard);
  });
}

4. Add the animation widget and a button to run the animation

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Container(
    height: 300,
    width: 300,
    child: _riveArtboard == null
        ? const SizedBox()
        : Rive(artboard: _riveArtboard!),
  ),
),
Container(
  height: 50,
  width: 50,
  child: GestureDetector(
    onTap: _togglePlay,
    child: Image.asset(
      'assets/capsicum.png',
    ),
  ),
),

5. Function to run the application. Note that we’ve to give animation name here. In this case animation name is ‘Animation 1’

void _togglePlay() {
  setState(() {
    _riveArtboard!
        .addController(_controller = SimpleAnimation('Animation 1'));
  });
}

Animation is ready 🎉 to try out.

Result