Build an Animated App with Rive and Flutter - 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.

In the first video, 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 and blur. We will also create a cool button animation. Next, we will focus on adding animated icons to the bottom navigation bar, which will really make your app design pop.

By the end of this series, you will have a solid understanding of how to use Rive and Flutter together to create stunning, animated apps that are both visually appealing and functional. So if you're a mobile developer looking to add some flair to your apps, or just want to learn more about animating with Rive and Flutter, be sure to check out this tutorial series!

► Social Media

► Timestamps
0:00 Intro

Thanks for watching!
Make sure to like + Subscribe For More!

[frankmungai]

This is so amazing, the UI is uniquely awesome ❣️🔥 many thanks to you for sharing this 😊

[BO-nnup]

Thank you for your kindness!
I am sooo excited to use this animation for my current project!
You are my savior!!

[GoodlyRogue]

Damn. I thought it looked so much like one of Design + Code's designs. I'm so happy this video exists. I wanted them to try Flutter for so long.

[esperaawo]

Can't wait for the second episode ! I enjoyed it a lot. Thank you !

[fatihyilmazz]

master please continue these animations got me excited :)

[KaranveerSingh]

This was absolutely sick. Amazing work!

[akshattamrakar]

Amazing, we need more videos like this.

[mohilbansal]

Bro can u please tell how do you get the assets like these shapes and other images. It is really very difficult for me to find these cool shapes and images. Please tell me bro please

[Muhammad-AnasKhan]

*Quick question regarding flutter issue*🤓

I am a beginner in flutter, what I want to do is to disable / hide / override the status bar (top) and navigation bar(bottom) in the mobile app permanently!❎

I have disabled the back key of mobile with 'WillPopScope' but couldn't found any way to disable the rest of mobile controls.

also used the 'setEnabledSystemUIMode' but it don't hide permanently

Can you tell me that how can we achieve this functionality in flutter

[shalikaashan]

I’m here after the devfest 2022. amazing animation. 😊

[ismaelperezmesa]

Hi everyone!! Excellent video!! I have a performance problem when I load a Rive Animation in my flutter app, I'm using an iphone 15 pro device and when it loads the animation the cpu works at 80% and makes the device heat up, I'm already using skia as a rendering engine. This happens even without having any simple svg shape in the artboard (in the rive side), just having a timeline animation even empty is enough for get this behavior on the device. How can I fix this? Any Suggestions ? Thanks a lot.

[claudezola]

Hi, i can't read .riv files on my pc. and i can't see them on emulator

[amorenog]

Amazing, already waiting for episode 2.

[parthpatel]

which extension you have used for dart code tree map on vs code?

[HanuuniyeOfficialChannel]

Sir. How to get first setup of your project

[kiengnguyenhuynh]

Hi bro.
I don't know what .riv files are. Can I convert from video to .riv? Is there a website or tool where I can do that?

[LeTranTrongNghia]

Fantastic video, I can't wait to see the next episode. Thank you so much for sharing this <3

[abassfadeil]

How do I solve the size problem? When using the Rive library, the application size increases by 10 megabytes

[Yellomellowil]

These all are flutter native can we make design here and import them on Android studio ????

[vaibhavbilwal]

how your vscode files are colored ??
can you share trick for that !!