Rive and Flutter: A Match Made in Animation Heaven — Episode 1

The Flutter Way
Flutter Community
Published in
7 min readDec 22, 2022

--

Welcome to our tutorial series on how to build an animated app with Rive and Flutter! In this series, we will be focusing entirely on creating stunning animations that will make your app stand out.

Preview of what we will be building throughout the series

🔥 Complete source code https://cutt.ly/b14ZAuh (Patreon)

In the first episode, we will start by setting up a Flutter project and integrating Rive into it. Then, we will use Rive’s powerful design tools to create beautiful background animations using shapes.

Get started

The first thing you need to do is clone the starting project from GitHub. This project includes all the necessary files and assets that you will need to begin building your app. To do this, simply visit the link provided (https://github.com/abuanwar072/Build-an-Animated-App-with-Rive-and-Flutter/tree/Starting). Once the project is cloned, you can open it in your preferred code editor and get ready for the next step.

You will find that it contains an assets directory, which holds all the necessary assets for the project. Inside this directory, you will also find a folder called RiveAssets, which contains all the Rive animations that will be used in the series.

Animated Shapes

--

--

The Flutter Way
Flutter Community

Want to improve your flutter skill? Join our channel, learn how to become an expert flutter developer and land your next dream job!