Rive and Flutter: A Match Made in Animation Heaven — Episode 1
--
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.
🔥 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
In this project, we will begin by working on the OnboardingScreen,
class OnboardingScreen extends StatefulWidget {
const OnboardingScreen({super.key});
@override
State<OnboardingScreen> createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}which is currently a blank screen located in the file lib/screens/onboarding/onboarding_screen.dart.
Scaffold(
body: Stack(
children: [
const RiveAnimation.asset("assets/RiveAssets/shapes.riv"),
],
),
)Within the Stack widget, we define the Rive animation that we want to use in our app. Adding a Rive animation to our app is similar to adding an image. All you need to do is define the location of the asset.
Add Blur
It is now time to add blur to our animation. To do this, we will use the BackdropFilter widget and define it after the RiveAnimation widget. To adjust the amount of blur, we can use the sigmaX and sigmaY properties to specify the standard deviation of the Gaussian blur in the horizontal and vertical directions, respectively. By adjusting these values, we can fine-tune the intensity of the blur effect and create the desired visual effect.
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
child: const SizedBox(),
),
),
To further enhance our animation, we can add an image and apply additional blur to it. To do this, we will place the image and blur above the Rive animation. This will allow us to display the rive animation on top of the image and blur.
Positioned(
width: MediaQuery.of(context).size.width * 1.7,
bottom: 200,
left: 100,
child: Image.asset("assets/Backgrounds/Spline.png"),
),
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 10),
),
),
Onboarding Screen UI
Now that we have completed the background animation, let’s move on to building the UI for the OnboardingScreen. At the top of the screen, we will include a large title, followed by a few lines of text. We will place an animated button at the bottom of the screen, with a few more lines of text.
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Spacer(),
SizedBox(
width: 260,
child: Column(
children: const [
Text(
"Learn design & code",
style: TextStyle(
fontSize: 60,
fontFamily: "Poppins",
height: 1.2,
),
),
SizedBox(height: 16),
Text(
"Don’t skip design. Learn design and code, by building real apps with Flutter and Swift. Complete courses about the best tools.",
),
],
),
),
const Spacer(flex: 2),
// TODO: Add the animated Button
const Padding(
padding: EdgeInsets.symmetric(vertical: 24),
child: Text(
"Purchase includes access to 30+ courses, 240+ premium tutorials, 120+ hours of videos, source files and certificates.",
),
),
],
),
),
),
Animated Button
The button that we will use in our app is also created using Rive. When the user taps on the button, we want it to start an animation. Let me show you how you can add interactivity to a Rive asset in order to achieve this effect. Replace Add the animated Button with the below code.
GestureDetector(
onTap: () {
// TODO: Start the animation
},
child: SizedBox(
height: 64,
width: 260,
child: Stack(
children: [
RiveAnimation.asset(
"assets/RiveAssets/button.riv",
// TODO: Add Rive Controller
),
Positioned.fill(
top: 8,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(CupertinoIcons.arrow_right),
SizedBox(width: 8),
Text(
"Start the course",
style: TextStyle(fontWeight: FontWeight.w600),
),
],
),
)
],
),
),
)We used a fixed size also the Stack widget to centre the icon and text within the button. The Stack widget allows us to overlay multiple children in a single container.
One question we need to address is how to start the animation when the user taps the button. To do this, we will need to use a RiveAnimationController, which allows us to add interactivity to our button and control the playback of the animation.
late RiveAnimationController _btnAnimationColtroller;
@override
void initState() {
_btnAnimationColtroller = OneShotAnimation(
"active",
autoplay: false,
);
super.initState();
}Rive supports three types of animations: OneShot, Loop, and PingPong. I am using the OneShotAnimation because the type of the button animation is OneShot, it allows the animation to play through once and then stop. This is useful for animations that are triggered by a user action, such as tapping a button. The animationName that I am using, active, refers to the name of the animation that is defined in the button.rive file. If you open this file in Rive, you will find two animations: idl and active. The active animation includes all of the keyframes and properties for the animation, while the idl animation is a placeholder that is used to define the default state of the button.
Now, let’s add the controller to our button. To do this, simply replace the TODO: Add Rive Controller with the following code:
controllers: [_btnAnimationColtroller]To start the animation when the user taps the button, we will set the button animation to true in the onTap event handler. To do this, simply replace the TODO: Start the animation with the following code:
_btnAnimationController.isActive = true;
Looking to create a stunning online store? Look no further than FlutterShop, the premium UI kit for Flutter that lets you build beautiful, intuitive, and professional-grade e-commerce app with ease. Whether you’re a pro or a seasoned developer or just getting started, FlutterShop’s user-friendly design and extensive customization options make it the perfect choice for creating a successful online store.
In this episode, we have learned how to create a visually appealing and interactive OnboardingScreen using Rive and Flutter. In the next episode, we will continue building out the app by creating a sign-in model, as well as custom text fields. We will also create a loading animation that can be displayed while the app is signing in, as well as error and success animations that are triggered in the event of an error or successful sign-in.
Episode 2: Add Some Pizzazz to Your Sign In Process with Flutter and Rive Animations
I would love to hear your thoughts on this tutorial and how you found it helpful. If you enjoyed it and found it useful, please don’t forget to give it a clap 👏. Your feedback is important to me and helps me to create content that is valuable and useful to you. Thank you for taking the time to read this tutorial, and I hope that it has been helpful in your animation journey with Rive and Flutter.
